@charset "UTF-8";

    :root {
--grid-size-xl: 144rem;
--grid-size-lg: 120rem;
--grid-size-md: 102.4rem;
--grid-size-smd: 89.9rem;
--grid-size-sm: 76.7rem;
--grid-size-xs: 49.9rem;
--grid-padding: 4rem;
--border-radius: 1rem;
--border-radius-sm: .8rem;
--font-family: 'Poppins', sans-serif;
--font-family-heading: 'Newsreader', serif;
--font-family-hand: 'Caveat', cursive;
--color-black: #292929;
--color-white: #ffffff;
--color-offwhite: #fefffa;
--color-green: #76a04e;
--color-lightgreen: #d0dd8d;
--color-palegreen: #f0f3e6;
--color-darkgreen: #627050;
--color-verydarkgreen: #3f4f33;
--color-orange: #d9893f;
--color-line: #dcdfcf;
--color-divider: var(--color-line);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
img,
svg,
video {
max-width: 100%;
height: auto;
} body {
position: relative;
overflow-x: hidden;
background-color: var(--color-white);
font-family: var(--font-family);
font-size: 1.65rem;
font-weight: 400;
line-height: 1.7;
color: var(--color-black);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility; -webkit-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 10 4 4;
overflow-wrap: break-word;
} body::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-image: url(//hrnatuurlijk.nl/wp-content/themes/hrnatuurlijk-theme/assets/images/pattern-leafs.svg);
background-position: center top;
opacity: .02;
pointer-events: none;
} :focus {
outline: none;
}
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: var(--font-family-heading);
font-weight: 300;
line-height: 1.1;
letter-spacing: -.01em;
color: var(--color-verydarkgreen);
}
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 em, .faux-h1 em,
h2 em, .faux-h2 em,
h3 em, .faux-h3 em {
font-style: italic;
color: var(--color-green);
}
h1 strong, .faux-h1 strong,
h2 strong, .faux-h2 strong,
h3 strong, .faux-h3 strong {
font-weight: inherit;
color: var(--color-verydarkgreen);
}
h1, .faux-h1 {
margin-bottom: 3rem;
font-size: 7.6rem;
color: var(--color-green);
}
h1 em, .faux-h1 em {
color: var(--color-verydarkgreen);
} h1.large, .faux-h1.large {
font-size: 9.6rem;
line-height: 1.05;
}
h2, .faux-h2 {
font-size: 6rem;
}
h2.large, .faux-h2.large {
font-size: 6.8rem;
}
h3, .faux-h3 {
font-size: 3.4rem;
font-weight: 400;
}
h3.large, .faux-h3.large {
font-size: 4.4rem;
font-weight: 300;
}
h3.small, .faux-h3.small {
font-size: 2.8rem;
line-height: 1.2;
} h4, .faux-h4 {
font-size: 2.8rem;
font-style: italic;
line-height: 1.2;
color: var(--color-green);
} p {
margin: 0 0 2rem;
} p.large {
font-size: 1.8rem;
line-height: 1.6;
} p.small,
.small {
font-size: 1.4rem;
line-height: 1.6;
}
p:empty {
display: none;
}
p:last-child {
margin: 0;
}
a {
color: inherit;
text-decoration: underline;
transition: .3s;
} strong {
font-weight: inherit;
}
blockquote {
margin: 0;
} code {
padding: .2rem .6rem;
border-radius: .4rem;
background-color: var(--color-palegreen);
font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: .85em;
overflow-wrap: anywhere;
hyphens: none;
}
.bgcolor-palegreen code {
background-color: var(--color-white);
} .handwritten {
font-family: var(--font-family-hand);
font-size: 3rem;
line-height: 1.2;
color: var(--color-green);
} ul,
ol {
margin: 0 0 2rem;
padding-left: 2rem;
}
ul.checklist {
display: grid;
gap: 1rem;
margin: 2rem 0;
padding: 0;
list-style: none;
}
ul.checklist:last-child {
margin-bottom: 0;
}
ul.checklist li {
position: relative;
padding-left: 2.8rem;
}
ul.checklist li::before {
content: '\f00c';
position: absolute;
left: 0;
top: .1rem;
font-family: 'Font Awesome 6 Pro';
font-weight: 300;
font-size: 1.6rem;
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: 14rem; }
.pt-md { padding-top: 9rem; }
.pt-sm { padding-top: 6rem; }
.pt-none { padding-top: 0; }
.pb-lg { padding-bottom: 14rem; }
.pb-md { padding-bottom: 9rem; }
.pb-sm { padding-bottom: 6rem; }
.pb-none { padding-bottom: 0; }  .btn,
.menu-btn a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: .9rem 2rem;
cursor: pointer;
border: 1px solid var(--color-green);
border-radius: 999px;
background-color: var(--color-green);
font-size: 1.5rem;
font-weight: 500;
line-height: 1.4;
color: var(--color-white);
text-decoration: none;
white-space: nowrap;
transition: .3s;
}
.btn::after {
content: '\f061';
font-family: 'Font Awesome 6 Pro';
font-weight: 300;
font-size: 1.4rem;
transition: transform .3s;
}
.btn:hover,
.menu-btn a:hover {
border-color: var(--color-verydarkgreen);
background-color: var(--color-verydarkgreen);
}
.btn:hover::after {
transform: translateX(.3rem);
} .btn.outline {
border-color: var(--color-verydarkgreen);
background-color: transparent;
color: var(--color-verydarkgreen);
}
.btn.outline:hover {
background-color: var(--color-verydarkgreen);
color: var(--color-white);
}
.btn.white {
border-color: var(--color-white);
background-color: var(--color-white);
color: var(--color-verydarkgreen);
}
.btn.white:hover {
border-color: var(--color-lightgreen);
background-color: var(--color-lightgreen);
} .btn.text {
padding: 0;
border: 0;
border-radius: 0;
background-color: transparent;
color: var(--color-verydarkgreen);
}
.btn.text:hover {
background-color: transparent;
}
.btn-group {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
* + .btn-group {
margin-top: 3rem;
}  .bgcolor-white {
background-color: transparent;
}
.bgcolor-palegreen {
background-color: var(--color-palegreen);
}
.bgcolor-darkgreen,
.bgcolor-verydarkgreen {
background-color: var(--color-verydarkgreen);
color: var(--color-offwhite);
}
.bgcolor-darkgreen {
background-color: var(--color-darkgreen);
}
.bgcolor-darkgreen :is(h1, h2, h3, .faux-h1, .faux-h2, .faux-h3),
.bgcolor-verydarkgreen :is(h1, h2, h3, .faux-h1, .faux-h2, .faux-h3) {
color: var(--color-offwhite);
}
.bgcolor-darkgreen :is(h1, h2, h3, h4, .faux-h1, .faux-h2, .faux-h3, .faux-h4) em,
.bgcolor-verydarkgreen :is(h1, h2, h3, h4, .faux-h1, .faux-h2, .faux-h3, .faux-h4) em,
.bgcolor-darkgreen :is(h4, .faux-h4),
.bgcolor-verydarkgreen :is(h4, .faux-h4) {
color: var(--color-lightgreen);
}
.bgcolor-darkgreen .btn.outline,
.bgcolor-verydarkgreen .btn.outline {
border-color: var(--color-offwhite);
color: var(--color-offwhite);
}
.bgcolor-darkgreen .btn.text,
.bgcolor-verydarkgreen .btn.text {
color: var(--color-offwhite);
}
.bgcolor-darkgreen ul.checklist li::before,
.bgcolor-verydarkgreen ul.checklist li::before {
color: var(--color-lightgreen);
} .label {
display: block;
margin-bottom: 2rem;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.8;
text-transform: uppercase;
letter-spacing: .25em;
color: var(--color-darkgreen);
}
.bgcolor-darkgreen .label,
.bgcolor-verydarkgreen .label {
color: var(--color-lightgreen);
}  .icon-circle {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 5.6rem;
height: 5.6rem;
border-radius: 50%;
background-color: var(--icon-bg, var(--color-palegreen));
font-size: 2.4rem;
color: var(--color-verydarkgreen);
}
.icon-circle i,
.icon-circle svg {
font-weight: 300;
}
.icon-circle.dark {
background-color: var(--color-verydarkgreen);
color: var(--color-white);
} .bgcolor-palegreen {
--icon-bg: var(--color-white);
} .bgcolor-darkgreen .icon-circle.dark,
.bgcolor-verydarkgreen .icon-circle.dark {
background-color: var(--color-lightgreen);
color: var(--color-verydarkgreen);
}  .fade-up {
opacity: 0;
transform: translateY(3rem);
transition: opacity .8s ease, transform .8s cubic-bezier(.2, .6, .2, 1);
}
.fade-up.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.fade-up {
opacity: 1;
transform: none;
transition: none;
}
} .site-header {
position: sticky;
top: 0;
z-index: 800;
padding: 0 var(--grid-padding);
background-color: var(--color-white);
border-bottom: 1px solid var(--color-line);
transition: background-color .3s ease, border-color .3s ease;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
min-height: 8rem;
transition: min-height .3s ease;
} .site-header.scrolled .header-inner {
min-height: 7rem;
}
.site-logo {
display: inline-block;
line-height: 1;
text-decoration: none;
}
.site-logo img {
display: block;
width: auto;
height: 5.4rem;
}
.site-logo .logo-light {
display: none;
}
.site-nav {
display: flex;
align-items: center;
}
.site-nav-links {
display: flex;
align-items: center;
gap: 3rem;
list-style: none;
margin: 0;
padding: 0;
}
.site-nav-links > li {
position: relative;
}
.site-nav-links a {
font-size: 1.5rem;
line-height: 1.4;
color: var(--color-black);
text-decoration: none;
}
.site-nav-links a:hover {
color: var(--color-green);
} .site-nav-links .current-menu-item > a,
.site-nav-links .current-menu-ancestor > a {
text-decoration: underline;
text-underline-offset: .5rem;
text-decoration-thickness: 1px;
} .site-nav-links .menu-item-has-children {
display: flex;
align-items: center;
gap: 1rem;
}
.site-nav-links .menu-item-has-children::after {
content: '\f107';
font-family: 'Font Awesome 6 Pro';
font-weight: 300;
font-size: 1.4rem;
line-height: 1;
color: var(--color-black);
transition: transform .3s;
}
.site-nav-links .menu-item-has-children:hover::after {
transform: rotate(180deg);
}
.site-nav-links .sub-menu {
position: absolute;
left: -2rem;
top: 100%;
min-width: 30rem;
margin: 0;
padding: 1.5rem 2rem;
list-style: none;
border: 1px solid var(--color-line);
border-radius: var(--border-radius);
background-color: var(--color-white);
opacity: 0;
visibility: hidden;
transform: translateY(1rem);
transition: opacity .3s ease, transform .3s ease, visibility .3s;
} .site-nav-links .sub-menu::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 2.5rem;
}
.site-nav-links .menu-item-has-children:hover > .sub-menu,
.site-nav-links .menu-item-has-children:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(1.5rem);
}
.site-nav-links .sub-menu li + li {
border-top: 1px solid var(--color-line);
}
.site-nav-links .sub-menu a {
display: block;
padding: 1.25rem 0;
font-size: 1.4rem;
} .site-nav-links .sub-menu .current-menu-item > a {
text-decoration: none;
color: var(--color-green);
} .site-nav-links .menu-btn a,
.site-nav-links .menu-btn a:hover {
line-height: 1.4;
color: var(--color-white);
text-decoration: none;
} .header-light .site-header {
position: fixed;
left: 0;
right: 0;
border-color: transparent;
background-color: transparent;
}
.header-light .site-header:not(.scrolled) .site-nav-links > li > a,
.header-light .site-header:not(.scrolled) .site-nav-links .menu-item-has-children::after {
color: var(--color-offwhite);
}
.header-light .site-header:not(.scrolled) .site-nav-links .menu-btn a {
border-color: var(--color-white);
background-color: var(--color-white);
color: var(--color-verydarkgreen);
}
.header-light .site-header:not(.scrolled) .logo-dark {
display: none;
}
.header-light .site-header:not(.scrolled) .logo-light {
display: block;
}
.header-light .site-header.scrolled {
border-color: var(--color-line);
background-color: var(--color-white);
}
.hamburger {
display: none;
align-items: center;
justify-content: center;
width: 4.4rem;
height: 4.4rem;
padding: 0;
border: 0;
border-radius: 50%;
background-color: var(--color-palegreen);
font-size: 2rem;
color: var(--color-verydarkgreen);
cursor: pointer;
}
.hamburger svg {
fill: currentColor;
} .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;
visibility: hidden;
transition: background-color .35s ease, visibility .35s;
} .mobile-menu:not(.is-open) {
background-color: transparent;
}
.mobile-menu.is-open {
visibility: visible;
}
.mobile-menu-top {
visibility: hidden;
}
.mobile-menu.is-open .mobile-menu-top {
visibility: visible;
}
body.menu-open .site-header .site-logo {
visibility: hidden;
} .mobile-menu-top {
display: flex;
flex-shrink: 0;
align-items: center;
min-height: calc(7rem + 1px);
}
.mobile-menu-top .site-logo img {
height: 4.4rem;
}
.mobile-menu-nav {
margin-top: 3rem;
}
.mobile-menu-links,
.mobile-menu-links .sub-menu {
margin: 0;
padding: 0;
list-style: none;
}
.mobile-menu-links > li {
border-bottom: 1px solid rgba(255, 255, 255, .12);
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-links a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: 1.4rem 0;
font-family: var(--font-family-heading);
font-size: 3rem;
font-weight: 300;
line-height: 1.2;
color: var(--color-offwhite);
text-decoration: none;
}  .mobile-menu-links .menu-item-has-children > a {
padding-bottom: .6rem;
}
.mobile-menu-links .sub-menu {
padding: 0 0 1.4rem 2rem;
}
.mobile-menu-links .sub-menu a {
padding: .6rem 0;
font-family: var(--font-family);
font-size: 1.6rem;
color: var(--color-lightgreen);
} .mobile-menu-links .menu-btn {
margin-top: 3rem;
border-bottom: 0;
}
.mobile-menu-links .menu-btn a {
justify-content: center;
padding: 1.2rem 2.4rem;
border-color: var(--color-white);
background-color: var(--color-white);
font-family: var(--font-family);
font-size: 1.5rem;
color: var(--color-verydarkgreen);
} body.menu-open {
overflow: hidden;
}
@media (min-width: 1281px) {
.mobile-menu {
display: none;
}
} .site-footer {
padding: 10rem var(--grid-padding) 0;
}
.footer-top {
display: grid;
grid-template-columns: 30rem repeat(3, 1fr);
gap: 6rem;
padding-bottom: 8rem;
}
.footer-brand .site-logo img {
height: 4.4rem;
}
.footer-brand-text {
margin-top: 2rem;
}
.footer-brand-text p {
font-family: var(--font-family-heading);
font-size: 2.8rem;
font-style: italic;
font-weight: 300;
line-height: 1.2;
letter-spacing: -.01em;
color: var(--color-verydarkgreen);
}
.footer-col {
font-size: 1.4rem;
line-height: 1.6;
}
.footer-col .label {
margin-bottom: 1.2rem;
}
.footer-col p {
margin-bottom: 1rem;
}
.footer-col a {
text-decoration: none;
}
.footer-col a:hover {
color: var(--color-green);
}
.footer-bottom {
display: flex;
justify-content: space-between;
gap: 2rem;
padding: 2rem 0 3rem;
border-top: 1px solid var(--color-divider);
font-size: 1.4rem;
color: var(--color-darkgreen);
}
.footer-bottom p {
margin: 0;
}
.footer-bottom a {
text-decoration: none;
}
.footer-bottom a + a {
margin-left: 2.4rem;
}
.footer-bottom a:hover {
text-decoration: underline;
}  @media (max-width: 1280px) { .site-header {
position: static;
}
.header-light .site-header {
position: absolute;
}
.header-inner,
.site-header.scrolled .header-inner {
min-height: 7rem;
}
.hamburger {
position: fixed;
right: 2rem;
top: 1.3rem;
z-index: 900;
}
.site-logo img {
height: 4.4rem;
}
.site-nav-links {
display: none;
}
.hamburger {
display: flex;
}
}
@media (max-width: 1220px) {
h1, .faux-h1 {
font-size: 6.4rem;
}
h1.large, .faux-h1.large {
font-size: 8.4rem;
}
h2.large, .faux-h2.large {
font-size: 5.8rem;
}
h2, .faux-h2 {
font-size: 5.2rem;
}
.footer-top {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 1024px) {
:root {
--grid-padding: 2rem;
}
.pt-lg { padding-top: 10rem; }
.pt-md { padding-top: 8rem; }
.pt-sm { padding-top: 5rem; }
.pb-lg { padding-bottom: 10rem; }
.pb-md { padding-bottom: 8rem; }
.pb-sm { padding-bottom: 5rem; }
h1, .faux-h1 {
margin-bottom: 2rem;
font-size: 5.4rem;
}
h1.large, .faux-h1.large {
font-size: 6.4rem;
}
h2.large, .faux-h2.large {
font-size: 4.8rem;
}
h2, .faux-h2 {
font-size: 4.4rem;
}
h3.large, .faux-h3.large {
font-size: 3.6rem;
}
h3, .faux-h3 {
font-size: 3rem;
}
.site-footer {
padding-top: 8rem;
}
.footer-top {
gap: 4rem;
padding-bottom: 6rem;
}
}
@media (max-width: 767px) {
h1, .faux-h1,
h2, .faux-h2 {
margin-bottom: 1.5rem;
}
h3, .faux-h3,
h4, .faux-h4 {
margin-bottom: 1rem;
}
.pt-lg { padding-top: 9rem; }
.pt-md { padding-top: 6rem; }
.pt-sm { padding-top: 3rem; }
.pb-lg { padding-bottom: 9rem; }
.pb-md { padding-bottom: 6rem; }
.pb-sm { padding-bottom: 3rem; }
body {
font-size: 1.6rem;
}
h1, .faux-h1 {
font-size: 4.4rem;
}
h1.large, .faux-h1.large {
font-size: 4.8rem;
}
h2.large, .faux-h2.large {
font-size: 3.8rem;
}
h2, .faux-h2 {
font-size: 3.4rem;
}
h3.large, .faux-h3.large {
font-size: 2.8rem;
}
h3, .faux-h3 {
font-size: 2.6rem;
}
h3.small, .faux-h3.small {
font-size: 2.4rem;
}
h4, .faux-h4 {
font-size: 2.2rem;
}
p.large {
font-size: 1.6rem;
}
.handwritten {
font-size: 2.6rem;
} .btn-group {
flex-direction: column;
align-items: stretch;
}
.btn-group .btn:not(.text) {
width: 100%;
} .btn-group .btn.text {
align-self: flex-start;
}
.site-footer {
padding-top: 6rem;
}
.footer-top {
grid-template-columns: 1fr;
gap: 3rem;
}
.footer-bottom {
flex-direction: column;
gap: .5rem;
}
}
@media (max-width: 499px) {
h1, .faux-h1 {
font-size: 3.8rem;
}
h1.large, .faux-h1.large {
font-size: 4.2rem;
}
h2.large, .faux-h2.large {
font-size: 3.4rem;
}
h2, .faux-h2 {
font-size: 3rem;
}
}.hero .container {
display: grid;
grid-template-columns: 1fr 50rem;
align-items: center;
gap: 8rem;
}
.hero .content-wrapper {
max-width: 63rem;
}
.hero .image-wrapper {
margin: 0;
} .hero .image {
position: relative;
display: flex;
justify-content: center;
}
.hero .image::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
aspect-ratio: 1;
border-radius: 50%;
background-color: var(--color-lightgreen);
}
.hero .image img {
position: relative;
display: block;
width: 43rem;
height: 56rem;
object-fit: cover;
object-position: top;
}
.hero figcaption {
margin: 2rem 0 0;
text-align: center;
} .hero-page {
padding-top: 9rem;
padding-bottom: 9rem;
}
.hero-page.has-image {
padding-bottom: 0;
}
.hero-page .content-wrapper {
max-width: 90rem;
}
.hero-page .breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 3rem;
}
.hero-page .breadcrumb span:not([aria-current]) {
color: var(--color-green);
}
.hero-page .image-wrapper {
margin-top: 6rem;
aspect-ratio: 5 / 2;
border-radius: var(--border-radius);
overflow: hidden;
}
.hero-page .image-wrapper img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} .hero-image {
display: flex;
overflow: hidden;
}
.hero-image > .row-lg {
position: relative;
display: flex;
} .hero-image.has-image {
min-height: 72rem;
padding-bottom: 8rem;
}
.hero-image .image-wrapper {
position: absolute;
inset: 0;
}
.hero-image .image-wrapper img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-image .image-wrapper::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(to bottom, rgba(63, 79, 51, 0) 40%, rgba(63, 79, 51, .9) 100%),
linear-gradient(to right, rgba(63, 79, 51, .55) 0%, rgba(63, 79, 51, 0) 50%);
}
.hero-image.has-image .container {
display: flex;
align-items: flex-end;
width: 100%;
}
.hero-image.has-image .content-wrapper {
max-width: 64rem;
} .hero-image.is-centered {
min-height: 76rem;
padding-top: 16rem;
padding-bottom: 14rem;
text-align: center;
}
.hero-image.is-centered .container {
display: flex;
align-items: center;
width: 100%;
}
.hero-image.is-centered .content-wrapper {
max-width: 92rem;
margin: 0 auto;
}
.hero-image .content-wrapper p {
color: var(--color-offwhite);
}
.hero-image .scroll-down {
position: absolute;
left: 50%;
bottom: 3rem;
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border: 1px solid var(--color-lightgreen);
border-radius: 50%;
font-size: 1.6rem;
color: var(--color-lightgreen);
text-decoration: none;
transform: translateX(-50%);
}
.hero-image .scroll-down:hover {
background-color: var(--color-lightgreen);
color: var(--color-verydarkgreen);
} @media (max-width: 1220px) {
.hero .container {
grid-template-columns: 1fr 42rem;
gap: 6rem;
}
.hero .image img {
width: 36rem;
height: 47rem;
}
}
@media (max-width: 1024px) { .hero .container {
grid-template-columns: 1fr 34rem;
gap: 4rem;
}
.hero .image img {
width: 30rem;
height: 39rem;
}
.hero-page {
padding-top: 6rem;
padding-bottom: 6rem;
}
.hero-page .content-wrapper {
max-width: none;
}
.hero-page .image-wrapper {
margin-top: 4rem;
}
.hero-image.has-image {
min-height: 60rem;
padding-bottom: 6rem;
}
.hero-image.is-centered {
min-height: 0;
padding-top: 14rem;
padding-bottom: 12rem;
}
}
@media (max-width: 767px) { .hero .container {
grid-template-columns: 1fr;
gap: 4rem;
}
.hero .content-wrapper {
max-width: none;
}
.hero .image-wrapper {
width: 100%;
max-width: 32rem;
margin: 0 auto;
}
.hero .image img {
width: 30rem;
height: 39rem;
} .hero.pt-sm {
padding-top: 6rem;
}
.hero-page .image-wrapper {
aspect-ratio: 5 / 3;
}
.hero-page .breadcrumb {
margin-bottom: 2rem;
}
.hero-image.has-image {
min-height: 45rem;
padding-bottom: 4rem;
}
.hero-image .scroll-down {
left: var(--grid-padding);
transform: none;
}
.hero-image.is-centered {
padding-top: 12rem;
padding-bottom: 10rem;
text-align: left;
}
}
@media (max-width: 499px) {
}.content-text.col-1 .container {
max-width: 82rem;
margin: 0 auto;
}
.content-text.is-centered .container {
text-align: center;
}
.content-text.is-centered .btn-group {
justify-content: center;
} .content-text :is(p, ul, ol) + :is(h2, h3) {
margin-top: 5rem;
}
.content-text :is(p, ul, ol) + h4 {
margin-top: 2rem;
}
.content-text li + li {
margin-top: .6rem;
} .content-text.col-2 .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8rem;
} .content-statement {
overflow: hidden;
}
.content-statement .container {
position: relative;
text-align: center;
}
.content-statement .label {
margin-bottom: 3rem;
}
.content-statement .label.caption {
margin: 4rem 0 0;
} .content-statement.has-circle::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
height: 80%;
aspect-ratio: 1;
border: 1px solid var(--color-lightgreen);
border-radius: 50%;
opacity: .6;
transform: translate(-50%, -50%);
pointer-events: none;
}
.content-statement .content-wrapper {
position: relative;
} .content-statement .content-wrapper p {
font-family: var(--font-family-heading);
font-size: 4.4rem;
font-weight: 300;
line-height: 1.2;
letter-spacing: -.01em;
color: var(--color-verydarkgreen);
}
.content-statement .content-wrapper.is-large p {
font-size: 6rem;
}
.content-statement .content-wrapper em {
color: var(--color-green);
}
.bgcolor-verydarkgreen.content-statement .content-wrapper p {
color: var(--color-offwhite);
}
.bgcolor-verydarkgreen.content-statement .content-wrapper em {
color: var(--color-lightgreen);
} .content-cta .container {
display: grid;
grid-template-columns: 40rem 1fr;
align-items: center;
gap: 10rem;
}
.content-cta .image-wrapper {
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
}
.content-cta .image-wrapper img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} .content-cta-bar .content-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2rem 4rem;
}
.content-cta-bar .content-wrapper > * {
margin: 0;
} .content-marquee {
padding-left: 0;
padding-right: 0;
}
.marquee {
display: flex;
overflow: hidden;
padding: 2.6rem 0;
border-top: 1px solid var(--color-divider);
border-bottom: 1px solid var(--color-divider);
}
.marquee-track {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 4rem;
margin: 0;
padding: 0 4rem 0 0;
list-style: none;
animation: marquee 45s linear infinite;
}
.marquee-track li {
display: flex;
align-items: center;
gap: 4rem;
font-family: var(--font-family-heading);
font-size: 3.4rem;
font-style: italic;
line-height: 1.1;
letter-spacing: -.01em;
white-space: nowrap;
color: var(--color-verydarkgreen);
}
.marquee-track i {
font-size: 2.2rem;
color: var(--color-green);
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track {
animation: none;
}
} .content-topics .container {
display: grid;
grid-template-columns: 30rem minmax(0, 80rem);
justify-content: space-between;
gap: 10rem;
} .topics-sidebar {
position: sticky;
top: 12rem;
align-self: start;
padding-top: 1.4rem;
}
.topics-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.topics-nav li {
border-top: 1px solid var(--color-divider);
}
.topics-nav a {
display: flex;
align-items: center;
gap: 1.4rem;
padding: 1.4rem 0;
font-size: 1.5rem;
line-height: 1.4;
color: var(--color-black);
text-decoration: none;
}
.topics-nav a::before {
content: '';
flex-shrink: 0;
width: 0;
height: 2px;
margin-right: -1.4rem;
background-color: var(--color-orange);
transition: width .3s ease, margin .3s ease;
}
.topics-nav a:hover {
color: var(--color-green);
}
.topics-nav a.is-active {
font-weight: 500;
color: var(--color-verydarkgreen);
}
.topics-nav a.is-active::before {
width: 1.8rem;
margin-right: 0;
}
.topics-sidebar-text {
padding-top: 3rem;
border-top: 1px solid var(--color-divider);
}
.topics-sidebar-text .btn-group {
margin-top: 1.6rem;
}
.topic {
padding: 6rem 0;
border-top: 1px solid var(--color-divider);
scroll-margin-top: 10rem;
}
.topic:first-child {
padding-top: 0;
border-top: 0;
}
.topic:last-child {
padding-bottom: 0;
}
.topic h2 {
margin-bottom: 2rem;
} .topic :is(p, ul, ol) + :is(h3, h4) {
margin-top: 3rem;
}
.topic .btn-group {
gap: 1rem 3rem;
margin-top: 3rem;
} .topic .testimonial-credit {
margin-top: 3rem;
color: var(--color-green);
} .topic-referral {
margin-top: 3rem;
padding-top: 3rem;
border-top: 1px solid var(--color-divider);
}
.topic-referral p {
color: var(--color-verydarkgreen);
}
.topic-referral .btn-group {
margin-top: 1rem;
} .content-model {
--model-bg: var(--color-white);
}
.content-model.bgcolor-palegreen {
--model-bg: var(--color-palegreen);
}
.content-model .content-wrapper {
max-width: 80rem;
margin: 0 auto;
text-align: center;
} .model {
--r: 30rem;
--cy: 33.6rem;
--part-height: 17.5rem;
position: relative;
max-width: 104rem;
height: calc(var(--cy) + var(--r) - 3.6rem + var(--part-height));
margin: 6rem auto 0;
}
.model::before,
.model::after {
content: '';
position: absolute;
left: 50%;
top: var(--cy);
aspect-ratio: 1;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.model::before {
width: calc(var(--r) * 2);
border: 1px dashed var(--color-green);
}
.model::after {
width: 36rem;
border: 1px solid var(--color-lightgreen);
}
.model-center {
position: absolute;
left: 50%;
top: var(--cy);
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 28rem;
aspect-ratio: 1;
padding: 0 4rem;
border-radius: 50%;
background-color: var(--color-white);
text-align: center;
transform: translate(-50%, -50%);
} .bgcolor-white .model-center {
background-color: var(--color-palegreen);
}
.model-center img {
width: 8rem;
margin-bottom: .8rem;
}
.model-center h3 {
margin-bottom: 0;
}
.model-center p.small {
font-size: 1.3rem;
}
.model-parts {
margin: 0;
padding: 0;
list-style: none;
}
.model-part {
position: absolute;
left: 50%;
top: var(--cy);
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
width: 23rem;
padding-bottom: .8rem;
background-color: var(--model-bg);
text-align: center;
transform: translate(calc(-50% + var(--x) * var(--r)), calc(-3.6rem + var(--y) * var(--r)));
} .model-part:nth-child(1) { --x: 0; --y: -1; }
.model-part:nth-child(2) { --x: .866; --y: -.5; }
.model-part:nth-child(3) { --x: .866; --y: .5; }
.model-part:nth-child(4) { --x: 0; --y: 1; }
.model-part:nth-child(5) { --x: -.866; --y: .5; }
.model-part:nth-child(6) { --x: -.866; --y: -.5; }
.model-part .icon-circle {
width: 7.2rem;
height: 7.2rem;
margin-bottom: 1rem;
font-size: 3rem;
}
.model-part h3 {
margin-bottom: .6rem;
}
.model-result {
display: flex;
align-items: center;
gap: 4rem;
max-width: 104rem;
margin: 8rem auto 0;
padding: 3rem 4rem;
border-radius: var(--border-radius-sm);
}
.model-result .icon-circle {
width: 6.4rem;
height: 6.4rem;
background-color: var(--color-lightgreen);
font-size: 2.8rem;
color: var(--color-verydarkgreen);
}
.model-result h3 {
margin-bottom: 1.2rem;
}
.model-result ul.checklist {
display: flex;
flex-wrap: wrap;
gap: .5rem 3rem;
margin: 0;
}
.model-result ul.checklist li {
padding-left: 2.4rem;
font-size: 1.4rem;
}
.model-result ul.checklist li::before {
font-size: 1.4rem;
}  .content-organisation-scan {
overflow: hidden;
}
.scan-intro {
display: grid;
grid-template-columns: minmax(0, 58fr) minmax(0, 54fr);
align-items: start;
gap: 8rem;
}
.scan-intro .image-wrapper {
position: relative;
aspect-ratio: 3 / 2;
}
.scan-intro .image-wrapper img {
display: block;
width: 100%;
height: 100%;
border-radius: var(--border-radius-sm);
object-fit: cover;
} .scan-intro .badge {
position: absolute;
right: -2rem;
top: -4rem;
display: flex;
align-items: center;
justify-content: center;
width: 16rem;
aspect-ratio: 1;
padding: .4rem 2.4rem 0;
border-radius: 50%;
background-color: var(--color-lightgreen);
font-family: var(--font-family-heading);
font-size: 1.9rem;
font-style: italic;
font-weight: 300;
line-height: 1.15;
text-align: center;
color: var(--color-verydarkgreen);
transform: rotate(8deg);
}
.scan-columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4rem;
margin-top: 6rem;
}
.scan-column {
padding-top: 3rem;
border-top: 1px solid var(--color-divider);
}
.scan-column-title {
display: flex;
align-items: center;
gap: 1.6rem;
margin-bottom: 1.8rem;
}
.scan-column-title h3 {
margin: 0;
}
.scan-column h4 {
font-size: 2.4rem;
}
.scan-bar {
display: flex;
align-items: center;
gap: 3rem;
margin-top: 6rem;
padding: 3rem 4rem;
border-radius: var(--border-radius-sm);
background-color: var(--color-palegreen);
--icon-bg: var(--color-white);
} .bgcolor-palegreen .scan-bar {
background-color: var(--color-white);
--icon-bg: var(--color-palegreen);
}
.scan-bar .icon-circle {
width: 6.4rem;
height: 6.4rem;
font-size: 2.8rem;
color: var(--color-green);
}
.scan-bar p {
flex: 1;
margin: 0 1rem 0 0;
} .content-principles .content-wrapper {
text-align: center;
}
.content-principles .content-wrapper + .principles {
margin-top: 6rem;
} .principles {
display: grid;
grid-template-columns: minmax(0, 38fr) minmax(0, 44fr) minmax(0, 38fr);
grid-template-areas:
"p1 ring p2"
"p3 ring p4";
gap: 6rem 0;
} .principle:nth-child(2) { grid-area: p1; }
.principle:nth-child(3) { grid-area: p2; }
.principle:nth-child(4) { grid-area: p3; }
.principle:nth-child(5) { grid-area: p4; }
.principle {
padding-top: 3rem;
border-top: 1px solid var(--color-divider);
}
.principle-title {
display: flex;
align-items: flex-start;
gap: 2rem;
margin-bottom: 2rem;
}
.principle-number {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border-radius: 50%;
background-color: var(--color-verydarkgreen);
font-family: var(--font-family-heading);
font-size: 2rem;
line-height: 1;
color: var(--color-white);
}
.principle-title h3 {
margin: 0;
}
.principle p {
padding-left: 6rem;
}
.principles-ring {
position: relative;
grid-area: ring;
align-self: center;
justify-self: center;
width: 77.2%;
max-width: 34rem;
aspect-ratio: 1;
}
.principles-ring::before {
content: '';
position: absolute;
inset: 0;
border: 1.5px solid var(--color-lightgreen);
border-radius: 50%;
}
.ring-center {
position: absolute;
inset: 22%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--color-palegreen);
}
.bgcolor-palegreen .ring-center {
background-color: var(--color-white);
}
.ring-center img {
width: 45%;
} .principles-ring .icon-circle {
position: absolute;
width: 7.2rem;
height: 7.2rem;
border: 6px solid var(--color-white);
box-sizing: content-box;
font-size: 3rem;
transform: translate(-50%, -50%);
} .principles-ring .icon-circle:nth-child(2) { left: 14.6%; top: 14.6%; }
.principles-ring .icon-circle:nth-child(3) { left: 85.4%; top: 14.6%; }
.principles-ring .icon-circle:nth-child(4) { left: 14.6%; top: 85.4%; }
.principles-ring .icon-circle:nth-child(5) { left: 85.4%; top: 85.4%; }
.content-principles .content-bottom {
margin: 6rem 0 0;
text-align: center;
}
.content-principles .content-bottom h4 {
color: var(--color-darkgreen);
} .content-timeline .content-wrapper {
max-width: 82rem;
margin: 0 auto;
text-align: center;
}
.timeline {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2.5rem;
margin: 6rem 0 0;
padding: 0;
list-style: none;
counter-reset: none;
} .timeline::before {
content: '';
position: absolute;
left: 10%;
right: 10%;
top: 4rem;
height: 1px;
background-color: var(--color-green);
}
.timeline-step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.timeline-step .icon-circle {
width: 8rem;
height: 8rem;
margin-bottom: 1.4rem;
font-size: 3.2rem;
}
.timeline-step .label {
margin-bottom: 1rem;
}
.timeline-step h3 {
margin-bottom: 1rem;
}
.content-timeline .content-bottom {
margin: 6rem auto 0;
}
.content-timeline .content-bottom .btn-group {
justify-content: center;
} .content-form .container {
display: grid;
grid-template-columns: 54rem 58rem;
justify-content: space-between;
align-items: start;
gap: 6rem;
}
.contact-details {
margin: 3rem 0 0;
padding: 0;
list-style: none;
}
.contact-details li {
display: flex;
align-items: center;
gap: 1.6rem;
padding: 1.8rem 0;
border-top: 1px solid var(--color-divider);
}
.contact-details .icon-circle {
width: 4.4rem;
height: 4.4rem;
font-size: 1.8rem;
}
.contact-details .label {
margin-bottom: .2rem;
}
.contact-details a {
color: var(--color-verydarkgreen);
text-decoration: none;
}
.contact-details a:hover {
color: var(--color-green);
}
.contact-person {
display: flex;
align-items: center;
gap: 1.6rem;
padding-top: 2rem;
border-top: 1px solid var(--color-divider);
}
.contact-person-image {
flex-shrink: 0;
width: 7.2rem;
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
background-color: var(--color-lightgreen);
}
.contact-person-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.contact-person > div {
display: flex;
flex-direction: column;
}
.contact-person-name {
font-size: 1.5rem;
font-weight: 500;
color: var(--color-verydarkgreen);
}
.contact-person .small,
.content-form .content-bottom {
color: var(--color-darkgreen);
}
.content-form .content-bottom {
margin-top: 3rem;
font-size: 1.4rem;
}
.form-wrapper {
padding: 4rem;
border-radius: var(--border-radius-sm);
background-color: var(--color-palegreen);
}
.form-wrapper > h2 {
margin-bottom: 2.4rem;
} @media (max-width: 1220px) { .model {
--r: 26rem;
--cy: 30rem;
--part-height: 20rem;
}
.model::after {
width: 30rem;
}
.model-center {
width: 24rem;
padding: 0 3rem;
}
.model-part {
width: 20rem;
}
.content-form .container {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 1024px) {
.content-statement .label {
margin-bottom: 2rem;
}
.content-statement .label.caption {
margin: 3rem 0 0;
}
.content-statement .content-wrapper p {
font-size: 3.4rem;
line-height: 1.3;
}
.content-statement .content-wrapper.is-large p {
font-size: 4.4rem;
} .principles {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"ring ring"
"p1 p2"
"p3 p4";
gap: 5rem 4rem;
}
.content-principles .content-wrapper + .principles {
margin-top: 4rem;
}
.principles-ring {
width: 100%;
max-width: 38rem;
}
.principles-ring .icon-circle {
width: 5.6rem;
height: 5.6rem;
font-size: 2.4rem;
}
.principle p {
padding-left: 0;
}
.content-text.col-2 .container {
gap: 4rem;
}
.content-cta .container {
grid-template-columns: 30rem 1fr;
gap: 6rem;
} .content-topics .container {
grid-template-columns: 1fr;
gap: 6rem;
}
.topics-sidebar {
position: static;
padding-top: 0;
}
.topics-sidebar-text {
display: none;
}
.topics-nav ul {
border-bottom: 1px solid var(--color-divider);
}
.model-result {
gap: 2rem;
padding: 3rem;
}
.scan-intro {
grid-template-columns: 1fr;
gap: 4rem;
} .scan-intro .image-wrapper {
aspect-ratio: 5 / 2;
}
.scan-columns {
grid-template-columns: 1fr;
gap: 4rem;
}
.scan-bar {
flex-direction: column;
align-items: flex-start;
gap: 2rem;
}
.scan-bar .icon-circle {
width: 5.6rem;
height: 5.6rem;
font-size: 2.4rem;
}
.topic {
padding: 4rem 0;
}
.timeline {
grid-template-columns: 1fr;
gap: 3rem;
max-width: 54rem;
margin-left: auto;
margin-right: auto;
} .timeline::before {
left: 3.2rem;
right: auto;
top: 3.2rem;
bottom: 3.2rem;
width: 1px;
height: auto;
}
.timeline-step {
display: grid;
grid-template-columns: 6.4rem 1fr;
column-gap: 2rem;
align-items: start;
text-align: left;
}
.timeline-step .icon-circle {
grid-row: 1 / span 4;
width: 6.4rem;
height: 6.4rem;
margin: 0;
font-size: 2.6rem;
}
.content-form .container {
grid-template-columns: 1fr;
}
.form-wrapper {
padding: 3rem 2rem;
}
}
@media (max-width: 767px) { .content-text.col-2 .container {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.content-text :is(p, ul, ol) + :is(h2, h3) {
margin-top: 3.5rem;
}
.content-principles .content-wrapper,
.content-principles .content-bottom {
text-align: left;
}
.principles {
grid-template-columns: 1fr;
grid-template-areas:
"ring"
"p1"
"p2"
"p3"
"p4";
gap: 3rem;
}
.principles-ring {
max-width: 24rem;
} .content-text.col-1 .container,
.content-model .content-wrapper,
.content-timeline .content-wrapper {
text-align: left;
}
.content-text.col-1 .btn-group,
.content-timeline .content-bottom .btn-group {
justify-content: flex-start;
}
.content-statement .content-wrapper p {
font-size: 3rem;
}
.content-statement .content-wrapper.is-large p {
font-size: 3.4rem;
}
.content-cta .container {
grid-template-columns: 1fr;
gap: 3rem;
}
.content-cta .image-wrapper {
width: 100%;
max-width: 26rem;
margin: 0 auto;
}
.timeline {
max-width: inherit;
}
.topic {
padding: 3rem 0;
}
.scan-intro .image-wrapper {
aspect-ratio: 5 / 3;
}
.marquee {
padding: 1.8rem 0;
}
.marquee-track,
.marquee-track li {
gap: 2rem;
}
.marquee-track {
padding-right: 2rem;
}
.marquee-track li {
font-size: 2.4rem;
}
.marquee-track i {
font-size: 1.6rem;
} .model {
height: auto;
margin: 4rem 0 0;
transform: none;
}
.model::before,
.model::after {
display: none;
}
.model-center {
position: static;
width: 100%;
aspect-ratio: auto;
margin-bottom: 1.5rem;
padding: 3rem 2rem;
border-radius: var(--border-radius-sm);
transform: none;
}
.model-parts {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.model-part {
position: static;
width: auto;
padding: 3rem 2rem;
border-radius: var(--border-radius-sm);
background-color: var(--color-white);
transform: none;
}
.model-center img {
width: 9.4rem;
}
.model-center h3 {
margin-bottom: .8rem;
}
.model-center p.small {
font-size: 1.4rem;
}
.model-part .icon-circle {
width: 5.6rem;
height: 5.6rem;
font-size: 2.4rem;
} .bgcolor-white .model-part {
background-color: var(--color-palegreen);
}
.model-result {
flex-direction: column;
padding: 3rem 2rem;
align-items: flex-start;
margin-top: 1.5rem;
}
.model-result .icon-circle {
width: 5.6rem;
height: 5.6rem;
font-size: 2.8rem;
}
.model-result ul.checklist {
flex-direction: column;
}
.scan-intro .badge {
right: 1rem;
width: 13rem;
font-size: 1.6rem;
}
.scan-bar {
padding: 3rem 2rem;
}
}
@media (max-width: 499px) {
}.slider-testimonials .container {
text-align: center;
}
.testimonial {
margin: 0;
}
.slider-testimonials .swiper-slide {
height: auto;
} .slider-testimonials .swiper-initialized {
-webkit-mask-image: linear-gradient(to right, transparent 12%, #000 19%, #000 81%, transparent 88%);
mask-image: linear-gradient(to right, transparent 12%, #000 19%, #000 81%, transparent 88%);
}
.slider-testimonials .swiper-slide {
height: auto;
} .slider-testimonials .swiper:not(.swiper-initialized) .testimonial {
max-width: 102.4rem;
margin: 0 auto;
}
.testimonial blockquote {
font-family: var(--font-family-heading);
font-size: 5.2rem;
font-style: italic;
font-weight: 300;
line-height: 1.1;
letter-spacing: -.01em;
color: var(--color-verydarkgreen);
}
.testimonial figcaption {
margin: 4rem 0 0;
color: var(--color-green);
}
.slider-nav {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 4rem;
}
.slider-nav button {
display: flex;
align-items: center;
justify-content: center;
width: 5.2rem;
height: 5.2rem;
padding: 0;
border: 1px solid var(--color-verydarkgreen);
border-radius: 50%;
background-color: transparent;
font-size: 1.8rem;
color: var(--color-verydarkgreen);
cursor: pointer;
transition: .3s;
}
.slider-nav button:hover {
background-color: var(--color-verydarkgreen);
color: var(--color-white);
}
.slider-nav .swiper-button-disabled {
opacity: .3;
pointer-events: none;
}  .has-reveal .swiper-slide {
opacity: 0;
transform: translateY(3rem);
transition: opacity 1s ease, transform 1.2s cubic-bezier(.2, .6, .2, 1);
}
.has-reveal.is-revealed .swiper-slide {
opacity: 1;
transform: none;
} .has-reveal .card.swiper-slide {
transition: opacity 1s ease, transform 1.2s cubic-bezier(.2, .6, .2, 1);
}
.has-reveal.is-revealed .card.is-link:hover {
transform: translateY(-.5rem);
transition-duration: 1s, .4s;
} .slider-services,
.slider-collaboration {
overflow: hidden;
}
.slider-services .swiper,
.slider-collaboration .swiper {
overflow: visible;
} .stretched-link::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
.slider-services .content-wrapper {
max-width: 82rem;
margin: 0 auto 5rem;
text-align: center;
}
.service {
position: relative;
}
.service .image-wrapper {
aspect-ratio: 373 / 470;
border-radius: var(--border-radius);
overflow: hidden;
background-color: var(--color-palegreen);
} .bgcolor-palegreen .service .image-wrapper {
background-color: var(--color-white);
}
.service .image-wrapper img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
.service.is-link:hover .image-wrapper img {
transform: scale(1.04);
}
.service-text {
margin-top: 3rem;
}
.service-text h3 {
margin-bottom: 1rem;
}
.service-text p {
margin-bottom: 1rem;
}
.service-text .btn {
margin-top: 1rem;
} .slider-collaboration .content-wrapper {
max-width: 82rem;
margin: 0 auto 5rem;
text-align: center;
} .slider-collaboration .swiper-slide {
height: auto;
} .card.swiper-slide {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
padding: 4rem 3.6rem;
border-radius: var(--border-radius-sm);
background-color: var(--color-white);
transition: transform .4s ease;
--icon-bg: var(--color-palegreen);
}
.card.is-link:hover {
transform: translateY(-.5rem);
}
.bgcolor-white .card {
background-color: var(--color-palegreen);
--icon-bg: var(--color-white);
}
.card .icon-circle {
width: 6.4rem;
height: 6.4rem;
font-size: 2.8rem;
}
.card h3 {
margin: 2rem 0 0;
}
.card-text {
flex-grow: 1;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--color-divider);
}
.card-text .label {
margin-bottom: .8rem;
}
.card .btn {
align-self: flex-start;
margin-top: 2rem;
white-space: normal;
} @media (max-width: 1024px) {
.card.swiper-slide {
padding: 3rem;
}
.slider-testimonials .swiper-initialized {
-webkit-mask-image: linear-gradient(to right, transparent 7%, #000 14%, #000 86%, transparent 93%);
mask-image: linear-gradient(to right, transparent 7%, #000 14%, #000 86%, transparent 93%);
}
.service .image-wrapper {
aspect-ratio: 3 / 2;
}
.service-text {
padding-right: 2rem;
}
.testimonial blockquote {
font-size: 4rem;
}
}
@media (max-width: 767px) {
.slider-services .content-wrapper,
.slider-collaboration .content-wrapper {
margin-bottom: 4rem;
text-align: left;
}
.slider-services .content-wrapper {
margin-bottom: 3rem;
}
.card.swiper-slide {
padding: 3rem 2rem;
}
.service-text {
margin-top: 2rem;
} .slider-testimonials {
--fade-color: var(--color-white);
position: relative;
overflow: hidden;
}
.slider-testimonials.bgcolor-palegreen { --fade-color: var(--color-palegreen); }
.slider-testimonials.bgcolor-darkgreen { --fade-color: var(--color-darkgreen); }
.slider-testimonials.bgcolor-verydarkgreen { --fade-color: var(--color-verydarkgreen); }
.slider-testimonials::before,
.slider-testimonials::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
width: 8rem;
pointer-events: none;
}
.slider-testimonials::before {
left: 0;
background: linear-gradient(to right, var(--fade-color), transparent);
}
.slider-testimonials::after {
right: 0;
background: linear-gradient(to left, var(--fade-color), transparent);
}
.slider-testimonials .swiper-initialized {
overflow: visible;
-webkit-mask-image: none;
mask-image: none;
}
.testimonial blockquote {
font-size: 3rem;
line-height: 1.2;
}
.testimonial figcaption {
margin-top: 2.4rem;
}
.slider-nav {
margin-top: 3rem;
}
}.gform_wrapper .gform_fields {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.5rem 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--width-third {
grid-column: span 4;
}
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
display: block;
margin-bottom: 1rem;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.5;
color: var(--color-black);
} .gform_wrapper .hidden_label > .gfield_label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.gform_wrapper .gfield_required {
color: var(--color-orange);
}
.gform_wrapper .gfield_description {
margin-top: .6rem;
font-size: 1.3rem;
color: var(--color-darkgreen);
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper select,
.gform_wrapper textarea {
width: 100%;
padding: 1.1rem 1.6rem;
border: 1px solid var(--color-line);
border-radius: var(--border-radius-sm);
background-color: var(--color-white);
font-size: 1.6rem;
line-height: 1.5;
color: var(--color-black);
transition: border-color .3s;
}
.gform_wrapper textarea {
min-height: 18rem;
resize: vertical;
}
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
color: var(--color-darkgreen);
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
outline: 0;
border-color: var(--color-green);
} .gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
display: grid;
gap: .8rem;
}
.gform_wrapper .gchoice {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.gform_wrapper .gchoice input {
flex-shrink: 0;
width: 1.8rem;
height: 1.8rem;
margin-top: .3rem;
accent-color: var(--color-verydarkgreen);
}
.gform_wrapper .gchoice label,
.gform_wrapper .gfield_consent_label {
font-size: 1.4rem;
line-height: 1.6;
cursor: pointer;
} .gform_wrapper .ginput_container_consent {
display: flex;
align-items: flex-start;
gap: 1.2rem;
}
.gform_wrapper .ginput_container_consent input {
flex-shrink: 0;
width: 2rem;
height: 2rem;
margin-top: .1rem;
accent-color: var(--color-verydarkgreen);
} .gform_wrapper .gform_footer {
margin-top: 2.4rem;
}
.gform_wrapper .gform_button {
padding: .9rem 2rem;
border: 1px solid var(--color-green);
border-radius: 999px;
background-color: var(--color-green);
font-size: 1.5rem;
font-weight: 500;
line-height: 1.4;
color: var(--color-white);
cursor: pointer;
transition: .3s;
}
.gform_wrapper .gform_button:hover {
border-color: var(--color-verydarkgreen);
background-color: var(--color-verydarkgreen);
} .gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.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_wrapper .gform_required_legend,
.gform_wrapper .gform_hidden,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .gform_validation_container {
display: none;
} @media (max-width: 767px) {
.gform_wrapper .gfield--width-half,
.gform_wrapper .gfield--width-third {
grid-column: span 12;
}
.gform_wrapper .gform_button {
width: 100%;
}
}