@charset "UTF-8"; /* * Converts pixels values to rem */ /* * Breakpoints */ /* * Default grid */ /* * Button */ /* * Underline */ /* * Utilities */ /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } picture img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } html { max-width: 100vw; overflow-x: hidden; font-size: min(20px, 0.833vw); /* REM 16px at 1920px. Maximum of 1.25× larger. */ } @media (max-width: 1024px) { html { font-size: min(20px, 1.73vw); /* REM 16px at 925px. Maximum of 1.25× larger. */ } } @media (max-width: 650px) { html { font-size: 4.071vw; } } body { background: #FCFAF9; } main { max-width: 100vw; overflow-x: hidden; overflow-y: scroll; } ::-moz-selection { color: #FCFAF9; background: #00381C; } ::selection { color: #FCFAF9; background: #00381C; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; } [x-cloak] { display: none !important; } .line-mask { overflow: hidden; padding: 0 0 1.25rem; margin: 0 0 -1.25rem; } @media (max-width: 650px) { .line-mask { padding: 0 0 0.625rem; margin: 0 0 -0.625rem; } } .swiper-button-disabled { opacity: 0.4; pointer-events: none; } .swiper-nav-next, .swiper-nav-prev { cursor: pointer; } .swiper-nav-prev { transform: scaleX(-1); } div.swiper-scrollbar.swiper-scrollbar-horizontal { position: relative; width: 100%; height: 1px; grid-column: 1/-1; margin: 3rem 0 0; } [style="background-color: #A8D3E6"] { color: #3F4D56; } [style="background-color: #FCFAF9"] { color: #00381C; } [style="background-color: #D76447"], [style="background-color: #00381C"], [style="background-color: #3F2534"], [style="background-color: #3F4D56"] { color: #FCFAF9; } [style="background-color: #00381C"] li::marker { color: #D76447; } @font-face { font-family: "Monument Grotesk"; src: url("fonts/monument-grotesk-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Monument Grotesk Mono"; src: url("fonts/monument-grotesk-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } h1, h2, h3, h4, h5 { font-family: "Monument Grotesk", sans-serif; color: currentColor; font-weight: 400; font-kerning: none; line-height: 1; letter-spacing: -0.015em; } h1 strong, h2 strong, h3 strong, h4 strong, h5 strong { font-weight: 600; } h1 em, h2 em, h3 em, h4 em, h5 em { font-style: italic; } h1 a, h2 a, h3 a, h4 a, h5 a { text-decoration: underline; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover { text-decoration: none; } p, li, blockquote { font-family: "Monument Grotesk", sans-serif; color: currentColor; font-weight: 400; font-kerning: none; line-height: 1.22; letter-spacing: 0; } p a { text-decoration: underline; } p a:hover { text-decoration: none; } .font-h1 { font-size: 7rem; line-height: 0.95; letter-spacing: -0.01em; } @media (max-width: 1024px) { .font-h1 { font-size: 5.5rem; } } @media (max-width: 650px) { .font-h1 { font-size: 2.625rem; } } .font-h2 { font-size: 4.5625rem; line-height: 1; } @media (max-width: 1024px) { .font-h2 { font-size: 3.875rem; } } @media (max-width: 650px) { .font-h2 { font-size: 2rem; } } .font-h3 { font-size: 2.5rem; line-height: 1.2; } @media (max-width: 1024px) { .font-h3 { font-size: 2.25rem; } } @media (max-width: 650px) { .font-h3 { font-size: 1.5rem; } } .font-h4 { font-size: 1.5rem; line-height: 1.2; } @media (max-width: 650px) { .font-h4 { font-size: 1.125rem; } } .font-p { font-size: max(14px, 1.125rem); } .font-pl { font-size: max(16px, 1.375rem); } @media (max-width: 650px) { .font-pl { font-size: max(14px, 1.125rem); } } .font-pxl { font-size: max(18px, 1.625rem); } .font-p ul, .font-pl ul, .font-pxl ul { padding: 0 0 0 2rem; margin: 2rem 0 3rem; } .font-p ul ul, .font-pl ul ul, .font-pxl ul ul { padding: 0 0 0 1.5rem; margin: 1rem 0 1.5rem; } .font-p ul, .font-pl ul, .font-pxl ul { list-style: disc; } .font-p li, .font-pl li, .font-pxl li { margin: 0 0 0.5rem; } .caption { font-family: "Monument Grotesk Mono", monospace; text-transform: uppercase; } .caption p { font-family: "Monument Grotesk Mono", monospace; } @media (max-width: 650px) { .caption { font-size: 0.875rem; } } .grid { display: grid; gap: 0 2.25rem; grid-template-columns: repeat(12, 1fr); } @media (max-width: 650px) { .grid { gap: 0 1.5rem; } } @media (max-width: 650px) { .grid { grid-template-columns: repeat(6, 1fr); } } .container { margin: 0 auto; width: calc(100% - 4.5rem); max-width: 120rem; } @media (max-width: 650px) { .container { width: calc(100% - 3rem); } } .button { display: inline-block; text-transform: uppercase; padding: 1.25rem 2.625rem; border-radius: 0.3125rem; font-family: "Monument Grotesk Mono", monospace; clip-path: polygon(1.25rem 0%, calc(100% - 1.25rem) 0%, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1.25rem) 100%, 1.25rem 100%, 0% calc(100% - 1rem), 0% 1rem); transition: clip-path 0.4s ease, background 0.4s; color: #FCFAF9; background: #D76447; } @media (max-width: 650px) { .button { font-size: 0.875rem; padding: 1.125rem 2rem; } } @media (hover: hover) { .button:hover { clip-path: polygon(0 0%, 100% 0%, 100% 0, 100% 100%, 100% 100%, 0 100%, 0% 100%, 0% 0); } .button:hover:after { rotate: 45deg; } } @media (hover: hover) { .button:hover { background: #00381C; } } .button:after { content: "+"; margin: 0 0 0 0.875rem; transition: rotate 0.3s; } .button--white { color: #00381C; background: #FCFAF9; } .button--white:hover { color: #FCFAF9; } .link { display: inline-flex; align-items: center; text-transform: uppercase; color: currentColor; font-family: "Monument Grotesk Mono", monospace; font-size: max(14px, 1.125rem); } @media (max-width: 650px) { .link { font-size: 0.875rem; } } @media (hover: hover) { .link:hover:before { transform: scale(1.2); } } .link:before { content: ""; width: 2.25rem; height: 2.25rem; background: currentColor; display: inline-block; margin: 0 0.75rem 0 0; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); background-size: 0.875rem; background-position: center; background-repeat: no-repeat; transition: transform 0.3s ease; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 7.36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.85 3.33-3.18-3.18c-.2-.2-.51-.2-.71 0s-.2.51 0 .71l2.33 2.33h-10.79c-.28 0-.5.22-.5.5s.22.5.5.5h10.79l-2.33 2.33c-.2.2-.2.51 0 .71s.51.2.71 0l3.18-3.18c.2-.2.2-.51 0-.71z' fill='%23fcfaf9'/%3E%3C/svg%3E"); } .link--white:before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 7.36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.85 3.33-3.18-3.18c-.2-.2-.51-.2-.71 0s-.2.51 0 .71l2.33 2.33h-10.79c-.28 0-.5.22-.5.5s.22.5.5.5h10.79l-2.33 2.33c-.2.2-.2.51 0 .71s.51.2.71 0l3.18-3.18c.2-.2.2-.51 0-.71z' fill='%2300381C'/%3E%3C/svg%3E"); } [style="background-color: #D76447"] .link:before, [style="background-color: #00381C"] .link:before, [style="background-color: #3F2534"] .link:before, [style="background-color: #3F4D56"] .link:before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 7.36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.85 3.33-3.18-3.18c-.2-.2-.51-.2-.71 0s-.2.51 0 .71l2.33 2.33h-10.79c-.28 0-.5.22-.5.5s.22.5.5.5h10.79l-2.33 2.33c-.2.2-.2.51 0 .71s.51.2.71 0l3.18-3.18c.2-.2.2-.51 0-.71z' fill='%2300381C'/%3E%3C/svg%3E"); } .play { width: 3rem; height: 3rem; background: #FCFAF9; display: inline-block; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); background-size: 0.875rem; background-repeat: no-repeat; background-position: 1.125rem center; background-image: url("data:image/svg+xml,%3Csvg width='12' height='14' viewBox='0 0 12 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7L-6.52533e-07 13.9282L-4.68497e-08 0.0717964L12 7Z' fill='%2300381C'/%3E%3C/svg%3E%0A"); transition: background 0.3s; cursor: pointer; } .play--green { background-color: #00381C; background-image: url("data:image/svg+xml,%3Csvg width='12' height='14' viewBox='0 0 12 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7L-6.52533e-07 13.9282L-4.68497e-08 0.0717964L12 7Z' fill='%23fff'/%3E%3C/svg%3E%0A"); } /* * Various masked shapes */ .clip-1 { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); } .clip-2 { clip-path: polygon(30% 0%, 70% 0%, 100% 42%, 100% 100%, 0 100%, 0% 42%); } .clip-3 { clip-path: polygon(35% 0%, 65% 0%, 87% 15%, 100% 42%, 100% 100%, 0 100%, 0 42%, 13% 15%); } .clip-4 { clip-path: polygon(30% 0%, 70% 0%, 100% 60%, 100% 100%, 0 100%, 0% 60%); } .clip-5 { clip-path: polygon(0 0, 100% 0, 100% 40%, 70% 100%, 30% 100%, 0% 40%); } .pagination { display: flex; justify-content: center; gap: 2.5rem; } @media (max-width: 650px) { .pagination { gap: 1.25rem; } } .pagination__item { font-family: "Monument Grotesk", sans-serif; color: currentColor; font-weight: 400; font-kerning: none; line-height: 1; letter-spacing: -0.015em; font-size: 1.5rem; line-height: 1.2; opacity: 0.5; color: #00381C; font-size: 1rem; padding: 0.75rem 0.375rem; position: relative; cursor: pointer; } @media (max-width: 650px) { .pagination__item { font-size: 1.125rem; } } .pagination__item.active { opacity: 1; } .pagination__prev, .pagination__next { color: #00381C; position: relative; cursor: pointer; } .pagination__prev.disabled, .pagination__next.disabled { opacity: 0.5; pointer-events: none; } .pagination__prev { transform: scaleX(-1); } .pagination__space { color: #00381C; font-size: 1.5rem; align-self: center; } .rich-text h2:first-child, .rich-text h3:first-child, .rich-text h4:first-child, .rich-text h5:first-child { margin: 0 0 1.25rem; } @media (max-width: 650px) { .rich-text h2:first-child, .rich-text h3:first-child, .rich-text h4:first-child, .rich-text h5:first-child { margin: 0 0 1.25rem; } } .rich-text h2:not(:first-child), .rich-text h3:not(:first-child), .rich-text h4:not(:first-child), .rich-text h5:not(:first-child) { margin: 3rem 0 1.25rem; } @media (max-width: 650px) { .rich-text h2:not(:first-child), .rich-text h3:not(:first-child), .rich-text h4:not(:first-child), .rich-text h5:not(:first-child) { margin: 1.25rem 0; } } .rich-text h2:nth-of-type(n + 2), .rich-text h3:nth-of-type(n + 2), .rich-text h4:nth-of-type(n + 2), .rich-text h5:nth-of-type(n + 2) { margin: 3rem 0 1.25rem; } @media (max-width: 650px) { .rich-text h2:nth-of-type(n + 2), .rich-text h3:nth-of-type(n + 2), .rich-text h4:nth-of-type(n + 2), .rich-text h5:nth-of-type(n + 2) { margin: 1.25rem 0; } } .rich-text h2 { font-size: 2.5rem; line-height: 1.2; } @media (max-width: 1024px) { .rich-text h2 { font-size: 2.25rem; } } @media (max-width: 650px) { .rich-text h2 { font-size: 1.5rem; } } .rich-text h3 { font-size: 1.5rem; line-height: 1.2; } @media (max-width: 650px) { .rich-text h3 { font-size: 1.125rem; } } .rich-text h4 { font-size: 1.5rem; line-height: 1.2; } @media (max-width: 650px) { .rich-text h4 { font-size: 1.125rem; } } .rich-text p { font-size: max(14px, 1.125rem); line-height: 1.375; margin: 0 0 1.375rem; } .rich-text ul, .rich-text ol { padding: 0 0 0 2rem; margin: 2rem 0 3rem; } .rich-text ul ul, .rich-text ol ol { padding: 0 0 0 1.5rem; margin: 1rem 0 1.5rem; } .rich-text ul { list-style: disc; } .rich-text ol { list-style: auto; } .rich-text ol ol { list-style: lower-alpha; } .rich-text li { font-size: max(14px, 1.125rem); margin: 0 0 0.5rem; } .rich-text img { width: 100%; height: auto; border-radius: 0.625rem; margin: 2rem 0; } .rich-text figure:not(.table) { position: relative; margin: 4.6875rem 0; } @media (max-width: 650px) { .rich-text figure:not(.table) { left: 0; min-width: 100%; } } .rich-text figure:not(.table) img { margin: 0; } @media (max-width: 650px) { .rich-text figure.table { position: relative; left: -1.5rem; min-width: 100vw; padding: 0 1.5rem; } } .rich-text table { width: 100%; border-collapse: collapse; margin: 3.125rem 0; border: 1px solid rgba(0, 56, 28, 0.3); } @media (max-width: 650px) { .rich-text table { margin: 2rem 0; } } .rich-text table th, .rich-text table td { border: 1px solid rgba(0, 56, 28, 0.3); } .rich-text table thead th { font-family: "Monument Grotesk", sans-serif; color: currentColor; font-weight: 400; font-kerning: none; line-height: 1.22; letter-spacing: 0; font-size: 1.125rem; font-weight: 500; padding: 1.25rem; background: #F5F2EF; } @media (max-width: 650px) { .rich-text table thead th { padding: 0.75rem; font-size: 0.875rem; } } .rich-text table tbody td { font-family: "Monument Grotesk", sans-serif; color: currentColor; font-weight: 400; font-kerning: none; line-height: 1.22; letter-spacing: 0; font-size: 1.125rem; padding: 1.25rem; } @media (max-width: 650px) { .rich-text table tbody td { padding: 0.75rem; font-size: 0.875rem; } } .rich-text table tr:nth-child(odd) { background: #F5F2EF; } .accreds { padding: 3.75rem 0; background: #FCFAF9; } .accreds__content { color: #FCFAF9; background: #00381C; padding: 1.625rem; border-radius: 0.625rem; display: flex; align-items: start; flex-direction: column; grid-column: span 6; } @media (max-width: 1024px) { .accreds__content { grid-column: 1/-1; margin: 0 0 2.25rem; } } .accreds__tagline { margin: 0 0 2rem; } @media (max-width: 650px) { .accreds__tagline { margin: 0 0 1.5rem; } } .accreds__heading { margin: 0 0 auto; } @media (max-width: 1024px) { .accreds__heading { margin: 0 0 4rem; } } .accreds__text { max-width: 35.3125rem; } @media (max-width: 1024px) { .accreds__text { max-width: none; } } .accreds__entries { grid-column: span 6; border-radius: 0.625rem; border: 1px solid #00381C; } @media (max-width: 1024px) { .accreds__entries { grid-column: 1/-1; } } .accreds__entry { display: grid; gap: 0 2.25rem; grid-template-columns: repeat(2, 1fr); gap: 6.25rem 0; padding: 1.625rem; } @media (max-width: 650px) { .accreds__entry { gap: 0 1.5rem; } } @media (max-width: 650px) { .accreds__entry { display: block; } } .accreds__entry:not(:last-child) { border-bottom: 1px solid #00381C; } .accreds__logo { grid-column: 2; grid-row: 1/span 2; width: 12.5rem; height: 9.375rem; mix-blend-mode: multiply; -o-object-fit: contain; object-fit: contain; margin: auto; } @media (max-width: 650px) { .accreds__logo { width: 6.25rem; height: auto; margin: 0 0 2rem; } } @media (max-width: 650px) { .accreds__title { margin: 0 0 1rem; } } .animation-text { padding: 7.5rem 0; } @media (max-width: 650px) { .animation-text { padding: 2.5rem 0; } } .animation-text__content { color: #3F4D56; background: #A8D3E6; grid-column: span 4; padding: 1.625rem; border-radius: 0.625rem; display: flex; align-items: start; flex-direction: column; } @media (max-width: 1024px) { .animation-text__content { grid-column: 1/-1; margin: 0 0 2.25rem; } } @media (max-width: 650px) { .animation-text__content { margin: 0 0 1.5rem; } } .animation-text__tagline { margin: 0 0 2rem; } @media (max-width: 650px) { .animation-text__tagline { margin: 0 0 1.5rem; } } .animation-text__heading { margin: 0 0 auto; } .animation-text__button { margin: 6.25rem 0 0; } .animation-text__holder { grid-column: 5/-1; aspect-ratio: 1220/950; border-radius: 0.625rem; border: 1px solid #00381C; position: relative; overflow: hidden; } @media (max-width: 1024px) { .animation-text__holder { grid-column: 1/-1; } } .animation-text__animation { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .announcement { position: fixed; top: 0; left: 0; width: 100vw; color: #00381C; background: #FCFAF9; transition: color 0.3s, background 0.3s; z-index: 97; } [data-header-theme=dark] .announcement { color: #FCFAF9; background: #00381C; } .announcement__inner, .announcement__track { display: flex; } .announcement__content { display: flex; gap: 3.25rem; padding: 0.5rem 0; margin-right: 3.25rem; } @media (max-width: 650px) { .announcement__content { gap: 2rem; } } .announcement__text { font-family: "Monument Grotesk Mono", monospace; text-transform: uppercase; display: flex; align-items: center; white-space: nowrap; gap: 3.25rem; } .announcement__text p { font-family: "Monument Grotesk Mono", monospace; } @media (max-width: 650px) { .announcement__text { font-size: 0.875rem; } } @media (max-width: 650px) { .announcement__text { gap: 2rem; } } .announcement__text:after { content: ""; width: 1.375rem; height: 1.375rem; background: currentColor; display: inline-block; pointer-events: none; } .announcement__text:nth-child(1):after { mask: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 22V9.35983L19.1627 3.3599L14.1392 0H10.9997H7.86014L2.83731 3.3599L0 9.35983V22H22Z' fill='%2300381C'/%3E%3C/svg%3E%0A") center center/cover; -webkit-mask: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 22V9.35983L19.1627 3.3599L14.1392 0H10.9997H7.86014L2.83731 3.3599L0 9.35983V22H22Z' fill='%2300381C'/%3E%3C/svg%3E%0A") center center/cover; } .announcement__text:nth-child(2):after { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); } .announcement__text span { transition: color 0.3s; } .announcement__text:hover span { color: #D76447; } .article { color: #00381C; background: #FCFAF9; padding: 18.75rem 0 4.6875rem; } @media (max-width: 1024px) { .article { padding: 15rem 0 4.6875rem; } } @media (max-width: 650px) { .article { padding: 11.25rem 0 4rem; } } .article__header { grid-column: span 9; padding: 0 0 4rem; border-bottom: 1px solid rgba(0, 56, 28, 0.3); } @media (max-width: 1024px) { .article__header { grid-column: 1/-1; } } @media (max-width: 650px) { .article__header { padding: 0 0 2rem; } } .article__date { display: block; margin: 0 0 2rem; } @media (max-width: 650px) { .article__date { margin: 0 0 1.5rem; } } .article__heading { max-width: 56.625rem; } .article__sidebar { grid-row: 1; grid-column: 10/span 3; padding: 0 0 0 2.25rem; display: flex; flex-direction: column; position: relative; } @media (max-width: 1024px) { .article__sidebar { grid-row: 2; grid-column: 1/-1; padding: 0; display: grid; gap: 0 2.25rem; grid-template-columns: repeat(3, 1fr); align-items: center; padding: 2rem 0 0; } } @media (max-width: 1024px) and (max-width: 650px) { .article__sidebar { gap: 0 1.5rem; } } @media (max-width: 650px) { .article__sidebar { display: flex; align-items: start; gap: 1rem; } } .article__content { grid-column: span 9; } @media (max-width: 1024px) { .article__content { grid-column: 1/-1; } } .article__content > div { max-width: 56.875rem; } .article__image { display: block; aspect-ratio: 16/9; margin: 7.5rem 0; border-radius: 0.625rem; overflow: hidden; } @media (max-width: 650px) { .article__image { margin: 4rem 0; } } .article__author { margin: 0 0 2rem; } @media (max-width: 1024px) { .article__author { margin: 0; } } .article__author span { display: block; opacity: 0.7; } .article__read { margin: 0 0 4rem; } @media (max-width: 1024px) { .article__read { margin: 0; } } .article__share { margin: auto 0 0; } .article__share-links { display: flex; gap: 1.25rem; } .article__share-link { opacity: 0.7; cursor: pointer; position: relative; transition: opacity 0.35s; } @media (hover: hover) { .article__share-link:hover { opacity: 1; } .article__share-link:hover:after { right: auto; left: 0; width: 100%; } } .article__share-link:after { content: ""; position: absolute; right: 0; bottom: -2px; height: 1px; width: 0%; background: currentColor; transition: width 0.4s ease; } .article__progress { position: absolute; top: 0; left: 0; width: 1.5px; height: 100%; background-color: rgba(0, 56, 28, 0.3); } @media (max-width: 1024px) { .article__progress { display: none; } } .article__progress span { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: #00381C; } .banner { position: fixed; width: 100vw; color: #FCFAF9; background: #FCFAF9; height: 100vh; padding: 14.375rem 0 0; transform: translateZ(0); } @media (max-width: 650px) { .banner { height: auto; min-height: 100lvh; padding: 8.75rem 0 0; position: relative; } } .banner__content { position: relative; z-index: 2; } .banner__tagline { display: block; margin: 0 0 2rem; } @media (max-width: 650px) { .banner__tagline { margin: 0 0 1.5rem; } } .banner__heading { max-width: 75rem; margin: 0 0 2.5rem; } .banner__heading + .banner__buttons { margin: 4rem 0 0; } .banner__text { font-size: 1.5rem; margin: 0 0 4rem; } @media (max-width: 650px) { .banner__text { font-size: 1.25rem; margin: 0 0 2rem; } } .banner__buttons { display: flex; gap: 1.5rem; } @media (max-width: 650px) { .banner__buttons { width: 100%; gap: 0.75rem; text-align: center; flex-direction: column; } } @media (max-width: 650px) { .banner__button { width: 100%; } } .banner__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .banner__image:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 100%); } @media (max-width: 650px) { .banner__image:after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 100%); } } .banner__video { position: absolute; right: 2.25rem; bottom: 2.25rem; cursor: pointer; border-radius: 0.625rem; -webkit-mask: url("data:image/svg+xml,%3Csvg width='281' height='308' viewBox='0 0 281 308' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M79.7906 2.91607C81.6648 1.04907 84.2033 0 86.8488 0H194.151C196.797 0 199.335 1.04906 201.209 2.91607C230.74 32.3331 248.53 50.0539 278.057 79.4667C279.941 81.3432 281 83.8932 281 86.5521V297.847C281 303.37 276.523 307.847 271 307.847H10C4.47715 307.847 0 303.37 0 297.847V86.5521C0 83.8932 1.05948 81.3432 2.94322 79.4667C32.47 50.0539 50.2596 32.3331 79.7906 2.91607Z' fill='%23FCFAF9'/%3E%3C/svg%3E%0A") center center/cover; mask: url("data:image/svg+xml,%3Csvg width='281' height='308' viewBox='0 0 281 308' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M79.7906 2.91607C81.6648 1.04907 84.2033 0 86.8488 0H194.151C196.797 0 199.335 1.04906 201.209 2.91607C230.74 32.3331 248.53 50.0539 278.057 79.4667C279.941 81.3432 281 83.8932 281 86.5521V297.847C281 303.37 276.523 307.847 271 307.847H10C4.47715 307.847 0 303.37 0 297.847V86.5521C0 83.8932 1.05948 81.3432 2.94322 79.4667C32.47 50.0539 50.2596 32.3331 79.7906 2.91607Z' fill='%23FCFAF9'/%3E%3C/svg%3E%0A") center center/cover; overflow: hidden; z-index: 3; } @media (max-width: 650px) { .banner__video { top: 0; left: 0; right: auto; bottom: auto; position: relative; display: inline-block; margin: 3.125rem auto; } } .banner__video:hover .banner__video-poster { transform: scale(1.15); } .banner__video:hover .banner__play { background-color: #D76447; } .banner__video-poster { display: block; width: 17.5rem; -o-object-fit: cover; object-fit: cover; aspect-ratio: 281/308; transition: transform 0.5s cubic-bezier(0.46, 0.03, 0.52, 0.96); } @media (max-width: 1024px) { .banner__video-poster { width: 12.5rem; } } @media (max-width: 650px) { .banner__video-poster { width: 10rem; } } .banner__play { position: absolute; top: 50%; left: 50%; translate: -50% -50%; } .banner__scroll { position: absolute; left: 2.25rem; bottom: 2.25rem; cursor: pointer; z-index: 2; } @media (max-width: 650px) { .banner__scroll { left: 1.5rem; bottom: 1.5rem; } } .banner__scroll:after { content: ""; display: inline-block; width: 1rem; height: 0.75rem; margin: 0 0 0 0.5rem; rotate: 90deg; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 7.36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.85 3.33-3.18-3.18c-.2-.2-.51-.2-.71 0s-.2.51 0 .71l2.33 2.33h-10.79c-.28 0-.5.22-.5.5s.22.5.5.5h10.79l-2.33 2.33c-.2.2-.2.51 0 .71s.51.2.71 0l3.18-3.18c.2-.2.2-.51 0-.71z' fill='%23fcfaf9'/%3E%3C/svg%3E"); } .banner__spacer { position: relative; width: 100vw; height: 100vh; pointer-events: none; } @media (max-width: 650px) { .banner__spacer { display: none; } } .banner__trustpilot { width: 450px; padding: 20px 0 10px; background: #FCFAF9; border-radius: 0.625rem; margin: 2rem 0 0; } @media (max-width: 650px) { .banner__trustpilot { width: 100%; } } .banner__trustpilot iframe { height: 30px; } @media (max-width: 650px) { .banner__trustpilot iframe { height: 50px; } } .banner__promo-image { position: absolute; right: 2.25rem; bottom: 2.25rem; width: 17.5rem; height: 17.5rem; } @media (max-width: 650px) { .banner__promo-image { top: 0; left: 0; right: auto; bottom: auto; position: relative; display: inline-block; margin: 3.125rem auto; width: 10rem; height: 10rem; } } .banner__promo-image img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .benefits-alt { padding: 7.5rem 0; } @media (max-width: 650px) { .benefits-alt { padding: 2.5rem 0; } } .benefits-alt__tagline, .benefits-alt__heading { grid-column: 1/span 5; } @media (max-width: 1024px) { .benefits-alt__tagline, .benefits-alt__heading { grid-column: 1/-3; } } @media (max-width: 650px) { .benefits-alt__tagline, .benefits-alt__heading { grid-column: 1/-1; } } .benefits-alt__tagline { margin: 0 0 2rem; } @media (max-width: 650px) { .benefits-alt__tagline { margin: 0 0 1.5rem; } } .benefits-alt__heading { margin: 0 0 4.75rem; } @media (max-width: 650px) { .benefits-alt__heading { margin: 0 0 2rem; } } .benefits-alt__entries { grid-template-columns: repeat(var(--columns), 1fr); grid-column: 1/-1; } @media (min-width: 1025px) { .benefits-alt__entries[data-items="2"] { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1025px) { .benefits-alt__entries[data-items="4"] { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1024px) { .benefits-alt__entries { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 650px) { .benefits-alt__entries { grid-template-columns: repeat(1, 1fr); gap: 1.5rem; } } .benefits-alt__entry { display: flex; flex-direction: column; justify-content: space-between; color: #00381C; background: #FCFAF9; border: 1px solid #00381C; border-radius: 0.625rem; padding: 1.125rem 9.375rem 1.125rem 1.5rem; } @media (min-width: 1025px) { [data-items="4"] .benefits-alt__entry { padding: 1.125rem 1.125rem 1.5rem; } } @media (min-width: 1025px) { [data-columns="5"] .benefits-alt__entry, [data-columns="6"] .benefits-alt__entry { padding: 1.125rem 1.125rem 1.5rem; } } @media (max-width: 1024px) { .benefits-alt__entry { padding: 1.125rem 1.5rem; } } .benefits-alt__title { margin: 0 0 14rem; } @media (min-width: 1025px) { [data-items="4"] .benefits-alt__title { margin: 0 0 8.125rem; } } @media (min-width: 1025px) { [data-columns="5"] .benefits-alt__title, [data-columns="6"] .benefits-alt__title { font-size: 1.75rem; } } @media (max-width: 650px) { .benefits-alt__title { margin: 0 0 9.375rem; } } .benefits { color: #00381C; background: #FCFAF9; padding: 7.5rem 0; } @media (max-width: 650px) { .benefits { padding: 4rem 0; } } .benefits__content { grid-column: span 6; display: flex; flex-direction: column; } @media (max-width: 1024px) { .benefits__content { grid-column: 1/-3; margin: 0 0 4rem; } } @media (max-width: 650px) { .benefits__content { grid-column: 1/-1; margin: 0 0 2rem; } } .benefits__tagline { margin: 0 0 2rem; } @media (max-width: 650px) { .benefits__tagline { margin: 0 0 1.5rem; } } .benefits__heading { max-width: 50rem; margin: 0 0 4rem; } @media (max-width: 1024px) { .benefits__heading { margin: 0; } } .benefits__list { margin: auto 0 0; } @media (max-width: 1024px) { .benefits__list { display: none; } } .benefits__entry { cursor: pointer; color: transparent; position: relative; display: inline-block; line-height: 1.2; color: rgba(0, 56, 28, 0.3); background: linear-gradient(90deg, rgba(0, 56, 28, 0) 50%, #00381C 0); -webkit-background-clip: text; background-clip: text; background-size: 200% 100%; background-position-x: 0%; transition: color 0.4s; } .benefits__entry h3 { line-height: 1.2; } @media (min-width: 1025px) { .benefits__entry h3 { font-size: 4.125rem; } } .benefits__entry.active { color: #00381C; background-position-x: -100%; pointer-events: none; } .benefits__entry.active .benefits__icon { transform: scale(1); background-position-x: 50%; } .benefits__icon { top: 1.875rem; right: -4.375rem; width: 2.25rem; height: 2.25rem; background: #00381C; position: absolute; display: inline-block; margin: 0 0.75rem 0 0; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); background-size: 0.875rem; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 7.36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.85 3.33-3.18-3.18c-.2-.2-.51-.2-.71 0s-.2.51 0 .71l2.33 2.33h-10.79c-.28 0-.5.22-.5.5s.22.5.5.5h10.79l-2.33 2.33c-.2.2-.2.51 0 .71s.51.2.71 0l3.18-3.18c.2-.2.2-.51 0-.71z' fill='%23fcfaf9'/%3E%3C/svg%3E"); transform: scale(0); background-position-x: -100%; transition: transform 0.6s ease, background-position 0.6s ease; pointer-events: auto; } .benefits__media { display: grid; grid-column: span 6; border-radius: 0.625rem; border: 1px solid #00381C; overflow: hidden; } @media (max-width: 1024px) { .benefits__media { display: none; } } .benefits__animation { grid-row: 1; grid-column: 1; opacity: 0; } @media (max-width: 1024px) { .benefits__animation { opacity: 1; height: 25rem; border-radius: 0.625rem; border: 1px solid #00381C; overflow: hidden; } } @media (max-width: 650px) { .benefits__animation { height: 17.5rem; } } .benefits__animation.active { opacity: 1; } .benefits__slider { grid-column: 1/-1; } @media (min-width: 1025px) { .benefits__slider { display: none; } } @media (min-width: 1025px) { .benefits .swiper-scrollbar { display: none; } } .benefits__title { margin: 1.5rem 0 1rem; } .chart { padding: 7.5rem 0; } @media (max-width: 650px) { .chart { padding: 4rem 0; } } .chart__holder { margin: 0 auto; height: 50rem; max-width: 75rem; } @media (max-width: 650px) { .chart__holder { height: 500px; } } @media (max-width: 650px) { .chart__holder canvas { height: 500px !important; } } .chris { color: #FCFAF9; background: #3F4D56; padding: 18.75rem 0 7.5rem; position: relative; z-index: 2; } @media (max-width: 1024px) { .chris { padding: 15rem 0 6.25rem; } } @media (max-width: 650px) { .chris { padding: 11.25rem 0 4rem; } } .chris__content { grid-column: span 8; } @media (max-width: 1024px) { .chris__content { grid-column: 1/-1; } } .chris__tagline { display: block; margin: 0 0 2rem; } @media (max-width: 650px) { .chris__tagline { margin: 0 0 1.5rem; } } .chris__heading { margin: 0 0 4rem; } .chris__heading .char { opacity: 0.2; } .chris__video-holder { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; } @media (max-width: 1024px) { .chris__video-holder { position: relative; top: 0; left: 0; width: 100%; height: auto; max-width: 31.25rem; margin: 7.5rem auto; } } @media (max-width: 650px) { .chris__video-holder { margin: 7.5rem auto 4rem; } } .chris__video { position: absolute; right: 2.25rem; bottom: 2.25rem; cursor: pointer; pointer-events: auto; border-radius: 0.625rem; -webkit-mask: url("data:image/svg+xml,%3Csvg width='281' height='308' viewBox='0 0 281 308' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M79.7906 2.91607C81.6648 1.04907 84.2033 0 86.8488 0H194.151C196.797 0 199.335 1.04906 201.209 2.91607C230.74 32.3331 248.53 50.0539 278.057 79.4667C279.941 81.3432 281 83.8932 281 86.5521V297.847C281 303.37 276.523 307.847 271 307.847H10C4.47715 307.847 0 303.37 0 297.847V86.5521C0 83.8932 1.05948 81.3432 2.94322 79.4667C32.47 50.0539 50.2596 32.3331 79.7906 2.91607Z' fill='%23FCFAF9'/%3E%3C/svg%3E%0A") center center/cover; mask: url("data:image/svg+xml,%3Csvg width='281' height='308' viewBox='0 0 281 308' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M79.7906 2.91607C81.6648 1.04907 84.2033 0 86.8488 0H194.151C196.797 0 199.335 1.04906 201.209 2.91607C230.74 32.3331 248.53 50.0539 278.057 79.4667C279.941 81.3432 281 83.8932 281 86.5521V297.847C281 303.37 276.523 307.847 271 307.847H10C4.47715 307.847 0 303.37 0 297.847V86.5521C0 83.8932 1.05948 81.3432 2.94322 79.4667C32.47 50.0539 50.2596 32.3331 79.7906 2.91607Z' fill='%23FCFAF9'/%3E%3C/svg%3E%0A") center center/cover; overflow: hidden; } @media (max-width: 1024px) { .chris__video { position: relative; right: 0; bottom: 0; margin: 0 auto; width: calc(100% - 4.5rem); } } @media (max-width: 650px) { .chris__video { width: calc(100% - 3rem); } } .chris__video:hover .chris__video-poster { transform: scale(1.15); } .chris__video:hover .chris__play { background-color: #D76447; } .chris__video-poster { display: block; width: 17.5rem; -o-object-fit: cover; object-fit: cover; aspect-ratio: 281/308; transition: transform 0.5s cubic-bezier(0.46, 0.03, 0.52, 0.96); } @media (max-width: 1024px) { .chris__video-poster { width: 100%; } } .chris__play { position: absolute; top: 50%; left: 50%; translate: -50% -50%; } .chris__illustration-holder { text-align: center; grid-column: 3/-3; margin: -9.375rem 0 0; display: flex; align-items: center; flex-direction: column; pointer-events: none; z-index: 2; } @media (max-width: 1024px) { .chris__illustration-holder { grid-column: 1/-1; width: 40.625rem; margin: 4rem auto 0; } } @media (max-width: 650px) { .chris__illustration-holder { width: 100%; margin: 0 auto; } } .chris__animation-holder { text-align: center; display: flex; align-items: center; flex-direction: column; margin: -8.125rem 0 0; grid-column: 3/-3; } @media (max-width: 1024px) { .chris__animation-holder { grid-column: 1/-1; } } .chris__animation-holder [data-lottie] { transform-origin: top; transform: translateY(-43%) scale(1.56); } @media (max-width: 1024px) { .chris__animation-holder [data-lottie] { transform: translateY(-41%) scale(1.6); } } @media (max-width: 650px) { .chris__animation-holder [data-lottie] { transform: translateY(-32%) scale(2.1); } } .chris__layer { position: relative; width: 56.5rem; will-change: transform; scale: 1.34; } @media (max-width: 1024px) { .chris__layer { display: flex; flex-direction: column-reverse; width: 100%; scale: 1; } } .chris__layer--1 { z-index: 6; margin: 0 0 1.875rem; } .chris__layer--2 { z-index: 5; translate: 0 -79%; margin: 0 0 3.75rem; } @media (max-width: 1024px) { .chris__layer--2 { translate: 0; } } .chris__layer--3 { z-index: 4; translate: 0 -204%; margin: 0 0 4.0625rem; } @media (max-width: 1024px) { .chris__layer--3 { translate: 0; } } .chris__layer--4 { z-index: 3; translate: 0 -273%; margin: 0 0 1.5rem; } @media (max-width: 1024px) { .chris__layer--4 { translate: 0; } } .chris__layer--5 { z-index: 2; translate: 0 -310%; } @media (max-width: 1024px) { .chris__layer--5 { translate: 0; } } .chris__layer--6 { z-index: 1; translate: 0 -229%; } @media (max-width: 1024px) { .chris__layer--6 { translate: 0; } } .chris__layer:nth-child(even) .chris__annotation { left: auto; top: -1.75rem; right: -19.625rem; text-align: right; } @media (max-width: 1024px) { .chris__layer:nth-child(even) .chris__annotation { top: 0; right: auto; text-align: left; } } .chris__layer:nth-child(even) .chris__annotation svg { transform: scaleX(-1); } .chris__layer:nth-child(even) .chris__text { margin-left: auto; } @media (max-width: 1024px) { .chris__layer:nth-child(even) .chris__text { margin: 0; } } .chris__layer [data-lottie] { transform-origin: top; transform: translateY(-60%) scale(2.11); } .chris__annotation { position: absolute; top: -3.375rem; left: -19.625rem; width: 33.25rem; text-align: left; pointer-events: none; } @media (max-width: 1024px) { .chris__annotation { position: relative; top: 0; left: 0; width: 100%; margin: 3rem 0 0; padding: 0 0 2rem; border-top: 1px solid #FCFAF9; } } .chris__annotation svg { position: absolute; top: 0; left: 0; width: 100%; } @media (max-width: 1024px) { .chris__annotation svg { display: none; } } .chris__title { color: #A8D3E6; margin: 1.625rem 0 1.375rem; } .chris__text { max-width: 25rem; } .collage { overflow: hidden; } .collage .grid { align-items: start; row-gap: 2.25rem; } @media (max-width: 650px) { .collage .grid { row-gap: 1.5rem; } } .collage .media, .collage .media-center { grid-row: 1; grid-column: 1/-1; grid-template-rows: 1fr 19.75rem 1fr; pointer-events: none; height: 100%; } .collage .media *, .collage .media-center * { pointer-events: auto; } @media (max-width: 1024px) { .collage .media, .collage .media-center { position: relative; width: 200vw; left: -50vw; } } @media (max-width: 650px) { .collage .media, .collage .media-center { width: 100%; left: 0; grid-template-rows: 1fr 11.375rem 1fr; } } .collage__center { grid-row: 2; grid-column: 5/-5; aspect-ratio: 592/316; position: relative; } @media (max-width: 650px) { .collage__center { grid-column: 1/-1; } } .collage__main-image { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 100%; height: 100%; } .collage__image { font-size: 0; position: relative; } .collage__image--1 { grid-row: 1; grid-column: 2/span 3; align-self: end; aspect-ratio: 435/320; clip-path: polygon(30% 0%, 70% 0%, 100% 42%, 100% 100%, 0 100%, 0% 42%); top: 8.25rem; } @media (max-width: 650px) { .collage__image--1 { top: 0; grid-column: 1/span 1; width: 13.75rem; right: 11.5rem; } } .collage__image--2 { grid-row: 1; grid-column: 7/span 4; aspect-ratio: 592/515; clip-path: polygon(35% 0%, 65% 0%, 87% 15%, 100% 42%, 100% 100%, 0 100%, 0 42%, 13% 15%); } @media (max-width: 650px) { .collage__image--2 { grid-column: 4/span 3; width: 13.875rem; left: 4rem; } } .collage__image--3 { grid-row: 3; grid-column: 3/span 2; aspect-ratio: 278/133; clip-path: polygon(0 0, 100% 0, 100% 40%, 70% 100%, 30% 100%, 0% 40%); top: 6rem; } @media (max-width: 650px) { .collage__image--3 { display: none; } } .collage__image--4 { grid-row: 3; grid-column: 7/span 3; aspect-ratio: 435/211; clip-path: polygon(30% 0%, 70% 0%, 100% 60%, 100% 100%, 0 100%, 0% 60%); } @media (max-width: 650px) { .collage__image--4 { grid-column: 3/span 4; } } .collage__shape { position: relative; background: #D76447; aspect-ratio: 1/1; } .collage__shape--1 { grid-row: 1; grid-column: 5/span 2; align-self: end; background: #D76447; } @media (max-width: 650px) { .collage__shape--1 { grid-column: 2/span 2; } } .collage__shape--2 { grid-row: 2; grid-column: 3/span 2; background: #00381C; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); top: 7.75rem; } @media (max-width: 650px) { .collage__shape--2 { display: none; } } .collage__shape--3 { grid-row: 2; grid-column: 9/-2; align-self: end; background: #3F4D56; aspect-ratio: 435/307; clip-path: polygon(30% 0%, 70% 0%, 100% 42%, 100% 100%, 0 100%, 0% 42%); } @media (max-width: 650px) { .collage__shape--3 { display: none; } } .collage__shape--4 { grid-row: 3; grid-column: 5/span 2; background: #A8D3E6; } @media (max-width: 650px) { .collage__shape--4 { grid-column: 1/span 2; width: 10rem; right: 3.875rem; } } .column-blocks { padding: 7.5rem 0; } @media (max-width: 650px) { .column-blocks { padding: 2.5rem 0; } } .column-blocks__tagline { margin: 0 0 2rem; } @media (max-width: 650px) { .column-blocks__tagline { margin: 0 0 1.5rem; } } .column-blocks__grid { display: flex; gap: 2.25rem; } @media (max-width: 1024px) { .column-blocks__grid { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; left: -2.25rem; padding: 0 2.25rem; min-width: calc(100% + 4.5rem); -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; scroll-behavior: smooth; } .column-blocks__grid::-webkit-scrollbar { display: none; } .column-blocks__grid > * { flex: 0 0 calc(66.66% - 1.125rem); scroll-snap-align: center; } } @media (max-width: 650px) { .column-blocks__grid { left: -1.5rem; gap: 1.5rem; padding: 0 1.5rem; min-width: calc(100% + 3rem); margin: 3rem 0 0; } .column-blocks__grid > * { flex: 0 0 calc(100% - 1.5rem); } } @media (min-width: 1025px) { .column-blocks__item { flex: 1; } } @media (hover: hover) { .column-blocks__item:hover .column-blocks__title { color: #D76447; } .column-blocks__item:hover .column-blocks__image-holder picture { transform: scale(1.1); } } .column-blocks__image-holder { display: block; aspect-ratio: 1/1; border-radius: 0.625rem; position: relative; overflow: hidden; transform: translateZ(0); margin: 0 0 1.25rem; } [data-items="1"] .column-blocks__image-holder { aspect-ratio: 2/1; } [data-items="2"] .column-blocks__image-holder { aspect-ratio: 2/1.5; } .column-blocks__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .column-blocks__title { margin: 0 0 1.5rem; padding: 0 3.125rem 0 0; transition: color 0.3s; } .column-blocks__title a { text-decoration: none; } .contact { color: #00381C; background: #FCFAF9; padding: 3.75rem 0; } @media (max-width: 650px) { .contact { padding: 2.5rem 0; } } .contact__tagline { display: block; grid-column: 1/span 4; margin: 0 0 2rem; } @media (max-width: 650px) { .contact__tagline { margin: 0 0 1.5rem; } } .contact__heading { max-width: 33.125rem; grid-column: 1/span 4; margin: 0 0 4rem; } @media (max-width: 1024px) { .contact__heading { grid-column: 1/span 6; margin: 0 0 2rem; } } .contact__form { padding: 2.25rem; border-radius: 1.25rem; grid-column: 1/span 8; border: 1px solid rgba(0, 56, 28, 0.3); } @media (max-width: 1024px) { .contact__form { grid-column: 1/-1; margin: 0 0 2.25rem; } } @media (max-width: 650px) { .contact__form { padding: 1.5rem; border-radius: 0.625rem; } } .contact__blocks { display: flex; gap: 2.25rem; flex-direction: column; grid-column: span 4; } @media (max-width: 1024px) { .contact__blocks { grid-column: 1/-1; } } .contact__block { flex: 1; padding: 1.5rem; border-radius: 1.25rem; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(0, 56, 28, 0.3); gap: 4rem; } .contact__text { max-width: 24.0625rem; } .cookie-bar { display: flex; position: fixed; left: 2.25rem; right: 2.25rem; bottom: 2.25rem; padding: 1rem 1.625rem; color: #00381C; background: #FCFAF9; border: 1px solid rgba(63, 77, 86, 0.25); align-items: center; justify-content: space-between; opacity: 0; pointer-events: none; border-radius: 0.375rem; transform: translateY(6.25rem); transition: opacity 0.6s, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); z-index: 97; } @media (max-width: 650px) { .cookie-bar { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; padding: 1rem; flex-wrap: wrap; } } .cookie-bar.visible { opacity: 1; transform: translateY(0); pointer-events: auto; transition: opacity 0.6s 2s, transform 0.8s 2s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 1024px) { .cookie-bar__heading { width: calc(100% - 21.875rem); } } @media (max-width: 650px) { .cookie-bar__heading { width: 100%; margin: 0 0 1rem; } } .cookie-bar__buttons { display: flex; gap: 1.5rem; } .cookie-bar__button { cursor: pointer; } .cookie-bar__button.decline { color: #3F4D56; } .cookie-bar__button.accept { color: #A8D3E6; } .cookie-bar__button.accept span { color: #3F4D56; } .cs-preview { padding: 3.75rem 0; } @media (max-width: 650px) { .cs-preview { padding: 2.5rem 0; } } .cs-preview__inner { width: 100%; aspect-ratio: 16/9; border-radius: 0.625rem; position: relative; overflow: hidden; } @media (max-width: 1024px) { .cs-preview__inner { aspect-ratio: 4/3; } } @media (max-width: 650px) { .cs-preview__inner { aspect-ratio: 1/2; } } .cs-preview__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .cs-preview__content { position: absolute; left: 2.25rem; bottom: 2.25rem; border-radius: 0.625rem; padding: 6.5rem 1.5rem 1.5rem; width: 27.1875rem; color: #00381C; background: #FCFAF9; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 435 505' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m95.82 2.93c1.87-1.87 4.42-2.93 7.07-2.93h229.22c2.65 0 5.2 1.06 7.07 2.93 35.78 35.72 57.1 57 92.88 92.71 1.88 1.88 2.94 4.43 2.94 7.08v392.27c0 5.52-4.48 10-10 10h-415c-5.52 0-10-4.48-10-10v-392.26c0-2.65 1.06-5.21 2.94-7.08 35.78-35.72 57.1-57 92.88-92.72z'/%3E%3C/svg%3E") center center/cover; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 435 505' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m95.82 2.93c1.87-1.87 4.42-2.93 7.07-2.93h229.22c2.65 0 5.2 1.06 7.07 2.93 35.78 35.72 57.1 57 92.88 92.71 1.88 1.88 2.94 4.43 2.94 7.08v392.27c0 5.52-4.48 10-10 10h-415c-5.52 0-10-4.48-10-10v-392.26c0-2.65 1.06-5.21 2.94-7.08 35.78-35.72 57.1-57 92.88-92.72z'/%3E%3C/svg%3E") center center/cover; } @media (max-width: 1024px) { .cs-preview__content { width: 21.875rem; } } @media (max-width: 650px) { .cs-preview__content { left: 1.5rem; bottom: 1.5rem; width: calc(100% - 3rem); padding: 5rem 1.125rem 1.125rem; } } .cs-preview__tagline { display: block; margin: 0 0 1rem; } @media (max-width: 650px) { .cs-preview__tagline { margin: 0 0 1.5rem; } } .cs-preview__heading { margin: 0 0 8.875rem; } @media (max-width: 650px) { .cs-preview__heading { margin: 0 0 4rem; } } .cs-slider { padding: 7.5rem 0; } @media (max-width: 650px) { .cs-slider { padding: 3.75rem 0; } } .cs-slider__tagline { display: block; margin: 0 0 2rem; } @media (max-width: 650px) { .cs-slider__tagline { margin: 0 0 1.5rem; } } .cs-slider__heading { margin: 0 0 2rem; max-width: 46.875rem; } .cs-slider__entries .card-article__image-holder { aspect-ratio: 1220/770; } .editor { color: #00381C; background: #FCFAF9; padding: 3.75rem 0; } @media (max-width: 650px) { .editor { padding: 2.5rem 0; } } .editor__content { grid-column: 2/-2; } @media (max-width: 1024px) { .editor__content { grid-column: 1/-1; } } .faqs { padding: 7.5rem 0; } @media (max-width: 650px) { .faqs { padding: 2.5rem 0; } } .faqs__tagline { display: block; margin: 0 0 2rem; } @media (max-width: 650px) { .faqs__tagline { margin: 0 0 1.5rem; } } .faqs__entry { color: #FCFAF9; background: #3F4D56; border-radius: 1.25rem; padding: 1.5rem 2.375rem; margin: 0 0 0.75rem; cursor: pointer; } @media (max-width: 650px) { .faqs__entry { padding: 1.125rem; border-radius: 0.625rem; } } .faqs__question { display: flex; align-items: center; justify-content: space-between; position: relative; } @media (max-width: 650px) { .faqs__question { padding: 0 2.625rem 0 0; } } .faqs__answer { max-width: 50rem; padding: 0.875rem 0 0; } .faqs__icon { width: 2.25rem; height: 2.25rem; background: #A8D3E6; position: relative; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } @media (max-width: 650px) { .faqs__icon { position: absolute; top: 50%; transform: translateY(-50%); right: 0; } } .expanded .faqs__icon { transform: rotate(45deg); } @media (max-width: 650px) { .expanded .faqs__icon { transform: translateY(-50%) rotate(45deg); } } .faqs__icon:after { content: ""; width: 0.875rem; height: 0.875rem; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.98182 12V0H7.01818V12H4.98182ZM0 7.01818V4.98182H12V7.01818H0Z' fill='%2300381C'/%3E%3C/svg%3E%0A"); position: absolute; top: 50%; left: 50%; translate: -50% -50%; } .page-banner + .faqs { padding-top: 0; } .features { padding: 7.5rem 0; } .features__content { color: #00381C; background: #FCFAF9; grid-column: span 8; padding: 1.625rem; border-radius: 0.625rem; display: flex; flex-direction: column; overflow: hidden; } @media (max-width: 1024px) { .features__content { grid-column: 1/-1; } } @media (max-width: 650px) { .features__content { margin: 2rem 0 0; } } .features__tagline { margin: 0 0 2rem; max-width: 46.875rem; } @media (max-width: 650px) { .features__tagline { margin: 0 0 1.5rem; } } .features__heading { margin: 0 0 3.125rem; max-width: 65.625rem; } .features__image { display: block; height: 50rem; margin: 4rem 0 0; } @media (max-width: 1024px) { .features__image { margin: 0; } } @media (max-width: 650px) { .features__image { height: auto; } } .features__image img { -o-object-fit: contain; object-fit: contain; } .features__scroller { color: #3F4D56; background: #A8D3E6; grid-column: span 4; text-align: center; border-radius: 0.625rem; overflow: hidden; } @media (max-width: 1024px) { .features__scroller { grid-column: 1/-1; margin: 2.25rem 0 0; background: transparent; overflow: visible; } } @media (max-width: 650px) { .features__scroller { margin: 1.5rem 0 0; } } @media (min-width: 1025px) { .features__scroller .swiper-wrapper { display: block; } } .features__item { margin: 0 auto; padding: 6.25rem 0; } @media (min-width: 1025px) { .features__item { width: calc(100% - 4.5rem) !important; } } @media (max-width: 1024px) { .features__item { height: auto; background: #A8D3E6; border-radius: 0.625rem; padding: 2.5rem 1.5rem; } } @media (max-width: 650px) { .features__item { display: flex; align-items: center; flex-direction: column; justify-content: center; } } .features__item:not(:last-child) { border-bottom: 1px solid #3F4D56; } .features__icon { display: block; width: 12.5rem; height: 9.375rem; margin: 0 auto 2rem; } @media (max-width: 1024px) { .features__icon { width: 7.5rem; height: 5rem; } } @media (max-width: 650px) { .features__icon { width: 10rem; height: 6.25rem; } } .features__icon img { -o-object-fit: contain; object-fit: contain; } .features__title { margin: 0 auto 1rem; max-width: 27.1875rem; } @media (max-width: 650px) { .features__title { margin: 0 0 0.625rem; } } .features__text { margin: 0 auto; max-width: 27.1875rem; } .footer { width: 100vw; padding: 2.25rem; overflow: hidden; } @media (max-width: 650px) { .footer { padding: 1.5rem; padding: 0; } } .footer ::-moz-selection { color: #00381C; background: #FCFAF9; } .footer ::selection { color: #00381C; background: #FCFAF9; } .footer__inner { color: #FCFAF9; background: #00381C; border-radius: 0.625rem; clip-path: polygon(41.25rem 0%, calc(100% - 41.25rem) 0%, calc(100% - 15.625rem) 15.625rem, 100% 42.625rem, 100% 100%, 0 100%, 0% 42.625rem, 15.625rem 15.625rem); } @media (max-width: 1024px) { .footer__inner { clip-path: polygon(35% 0%, 65% 0%, 90% 5%, 100% 15%, 100% 100%, 0 100%, 0% 15%, 10% 5%); } } @media (max-width: 650px) { .footer__inner { clip-path: polygon(36% 0%, 64% 0%, 88% 2%, 100% 5%, 100% 100%, 0 100%, 0% 5%, 12% 2%); } } .footer__cta { text-align: center; padding: 8.125rem 0 3.75rem; } @media (max-width: 650px) { .footer__cta { padding: 3.75rem 0; } } @media (max-width: 650px) { .footer__cta { padding: 3.75rem 0 2.875rem; } } .footer__tagline { display: block; margin: 0 0 7.25rem; } @media (max-width: 650px) { .footer__tagline { margin: 0 0 3.75rem; } } .footer__heading { font-size: 5.75rem; max-width: 75rem; margin: 0 auto 7.5rem; } @media (max-width: 1024px) { .footer__heading { font-size: 4.5rem; padding: 0 2rem; } } @media (max-width: 650px) { .footer__heading { font-size: 1.875rem; margin: 0 0 3.75rem; } } .footer__buttons { display: flex; align-items: center; justify-content: center; gap: 2.5rem; } @media (max-width: 650px) { .footer__buttons { flex-direction: column; } } @media (hover: hover) { .footer__button.button:hover { background: #D76447; } } .footer__accreds { display: flex; border-top: 1px solid rgba(252, 250, 249, 0.3); border-bottom: 1px solid rgba(252, 250, 249, 0.3); padding: 4rem 0; overflow: hidden; } @media (max-width: 650px) { .footer__accreds { padding: 1.125rem 0; } } .footer__accreds-track { display: flex; animation: marquee 30s infinite linear; } .footer__accreds-group { display: flex; align-items: center; } .footer__accreds-logo { height: 5rem; width: 12.5rem; margin: 0 7.5rem 0 0; } @media (max-width: 650px) { .footer__accreds-logo { height: 3.125rem; width: 6.25rem; margin: 0 4rem 0 0; } } .footer__accreds-logo img { -o-object-fit: contain; object-fit: contain; } .footer__main { display: flex; flex-wrap: wrap; gap: 6.25rem; padding: 3.75rem 1.5rem 0; border-bottom: 1px solid rgba(252, 250, 249, 0.3); } @media (max-width: 1024px) { .footer__main { gap: 0; } } @media (max-width: 650px) { .footer__main { padding: 2.5rem 1.5rem 0; } } @media (max-width: 1024px) { .footer__home { margin: 0 0 4rem; } } @media (max-width: 650px) { .footer__home { margin: 0 0 2.25rem; } } .footer__logo { width: 15.5625rem; } @media (max-width: 650px) { .footer__logo { width: 8.5rem; } } .footer__nav { width: calc(100% - 21.875rem); } @media (max-width: 1024px) { .footer__nav { width: 100%; } } @media (max-width: 650px) { .footer__nav { border-bottom: 1px solid rgba(252, 250, 249, 0.3); } } @media (min-width: 651px) { .footer__nav > div { height: auto !important; display: block !important; } } .footer__nav > div > .nav-items { display: flex; flex-wrap: wrap; justify-content: space-around; } @media (max-width: 650px) { .footer__nav > div > .nav-items { padding: 1rem 0 0; } } @media (max-width: 1024px) { .footer__nav > div > .nav-items > li { width: 25%; padding: 0 1.5rem 4rem 0; } } @media (max-width: 650px) { .footer__nav > div > .nav-items > li { width: 100%; padding: 0 0 1.5rem; } } .footer__nav > div > .nav-items > li > a { display: inline-block; margin: 0 0 0.75rem; } .footer__nav .nav-items li { margin: 0 0 0.5rem; font-family: "Monument Grotesk Mono", monospace; text-transform: uppercase; } .footer__nav .nav-items li p { font-family: "Monument Grotesk Mono", monospace; } @media (max-width: 650px) { .footer__nav .nav-items li { font-size: 0.875rem; } } .footer__nav .nav-items li a { position: relative; transition: opacity 0.35s; } @media (hover: hover) { .footer__nav .nav-items li a:hover { opacity: 1; } .footer__nav .nav-items li a:hover:after { right: auto; left: 0; width: 100%; } } .footer__nav .nav-items li a:after { content: ""; position: absolute; right: 0; bottom: -2px; height: 1px; width: 0%; background: currentColor; transition: width 0.4s ease; } .footer__nav .nav-items li a[href="#"] { pointer-events: none; } .footer__nav .has-children .nav-items a { opacity: 0.55; } .footer__toggle { width: 100%; padding: 1rem 0; position: relative; cursor: pointer; } @media (min-width: 651px) { .footer__toggle { display: none; } } .footer__toggle:after { content: ""; width: 0.5rem; height: 0.5rem; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.98182 12V0H7.01818V12H4.98182ZM0 7.01818V4.98182H12V7.01818H0Z' fill='%23ffffff'/%3E%3C/svg%3E%0A"); transition: transform 0.6s ease; position: absolute; top: 50%; transform: translateY(-50%); right: 0; } .footer__toggle.expanded:after { transform: translateY(-50%) rotate(45deg); } .footer__socials { align-self: end; padding: 0 0 1.5rem; } @media (max-width: 1024px) { .footer__socials { margin: 0 0 2rem; } } @media (max-width: 650px) { .footer__socials { width: 100%; padding: 0; border-bottom: 1px solid rgba(252, 250, 249, 0.3); } } @media (min-width: 651px) { .footer__socials > div { height: auto !important; display: block !important; padding: 0 0 0.25rem; } } .footer__socials ul { display: flex; gap: 1.5rem; } @media (max-width: 650px) { .footer__socials ul { gap: 0.375rem; padding: 0 0 1.5rem; flex-direction: column; } } .footer__socials ul a { font-family: "Monument Grotesk Mono", monospace; text-transform: uppercase; position: relative; transition: opacity 0.35s; } .footer__socials ul a p { font-family: "Monument Grotesk Mono", monospace; } @media (max-width: 650px) { .footer__socials ul a { font-size: 0.875rem; } } @media (hover: hover) { .footer__socials ul a:hover { opacity: 1; } .footer__socials ul a:hover:after { right: auto; left: 0; width: 100%; } } .footer__socials ul a:after { content: ""; position: absolute; right: 0; bottom: -2px; height: 1px; width: 0%; background: currentColor; transition: width 0.4s ease; } .footer .fui-i { width: 50rem; margin-left: auto; padding: 0 1.5rem 1.25rem; border-left: 1px solid rgba(252, 250, 249, 0.3); } @media (max-width: 1024px) { .footer .fui-i { width: 100%; border: 0; padding: 0 0 1.25rem; } } .footer .fui-i .fui-form { position: relative; } .footer .fui-i .fui-row { margin: 0; } .footer .fui-i .fui-alert.fui-alert-error { display: none; } .footer .fui-i .fui-form .fui-error-message { color: #FCFAF9; } .footer .fui-i .fui-alert { padding: 1.25rem 0 0.375rem; } .footer .fui-i input[type=email] { width: 100%; color: #FCFAF9; font-size: 2.4375rem; font-family: "Monument Grotesk", sans-serif; border: 0; padding: 0; border-radius: 0; } @media (max-width: 650px) { .footer .fui-i input[type=email] { font-size: 1.5rem; } } .footer .fui-i input[type=email]::-moz-placeholder { color: #FCFAF9; opacity: 0.55; } .footer .fui-i input[type=email]::placeholder { color: #FCFAF9; opacity: 0.55; } .footer .fui-i input[type=email].fui-error { border: 0; } .footer .fui-i button.fui-submit { font-size: 0; position: absolute; right: 0; bottom: 0; } .footer .fui-i button.fui-submit:before { margin: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 7.36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.85 3.33-3.18-3.18c-.2-.2-.51-.2-.71 0s-.2.51 0 .71l2.33 2.33h-10.79c-.28 0-.5.22-.5.5s.22.5.5.5h10.79l-2.33 2.33c-.2.2-.2.51 0 .71s.51.2.71 0l3.18-3.18c.2-.2.2-.51 0-.71z' fill='%2300381C'/%3E%3C/svg%3E"); } .footer__newsletter { width: 50rem; margin-left: auto; padding: 0 1.5rem 1.25rem; border-left: 1px solid rgba(252, 250, 249, 0.3); } @media (max-width: 1024px) { .footer__newsletter { width: 100%; border: 0; padding: 0 0 1.25rem; } } .footer__newsletter div { position: relative; } .footer__newsletter label { display: block; font-family: "Monument Grotesk Mono", monospace; text-transform: uppercase; margin: 0 0 0.375rem; } .footer__newsletter label p { font-family: "Monument Grotesk Mono", monospace; } @media (max-width: 650px) { .footer__newsletter label { font-size: 0.875rem; } } .footer__newsletter input[type=email] { width: 100%; color: #FCFAF9; font-size: 2.4375rem; font-family: "Monument Grotesk", sans-serif; } @media (max-width: 650px) { .footer__newsletter input[type=email] { font-size: 1.5rem; } } .footer__newsletter input[type=email]::-moz-placeholder { opacity: 0.55; } .footer__newsletter input[type=email]::placeholder { opacity: 0.55; } .footer__newsletter button { position: absolute; right: 0; bottom: 0; } .footer__newsletter button:before { margin: 0; } .footer__bottom { display: flex; flex-wrap: wrap; padding: 3.75rem 1.5rem; } .footer__bottom * { font-family: "Monument Grotesk Mono", monospace; text-transform: uppercase; } .footer__bottom * p { font-family: "Monument Grotesk Mono", monospace; } @media (max-width: 650px) { .footer__bottom * { font-size: 0.875rem; } } .footer__copyright { width: 100%; margin: 0 0 1.5rem; } .footer__content { display: flex; gap: 1.5rem; margin: 0 0 0 1.5rem; } @media (max-width: 1024px) { .footer__content { flex-wrap: wrap; margin: 1.5rem 0 0; } } .footer__content p { max-width: 23.625rem; } @media (max-width: 1024px) { .footer__content p { max-width: none; } } @media (max-width: 650px) { .footer__content p { width: 100%; display: flex; justify-content: space-between; } } .footer__credit { opacity: 0.55; align-self: end; margin-left: auto; position: relative; position: relative; transition: opacity 0.35s; } @media (hover: hover) { .footer__credit:hover { opacity: 1; } .footer__credit:hover:after { right: auto; left: 0; width: 100%; } } .footer__credit:after { content: ""; position: absolute; right: 0; bottom: -2px; height: 1px; width: 0%; background: currentColor; transition: width 0.4s ease; } @media (max-width: 1024px) { .footer__credit { margin: 1.5rem 0 0; } } .footer__legal { opacity: 0.55; font-size: 0.875rem; margin: 1.5rem 0 0; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-33.33%); } } .form { padding: 3.75rem 0; } @media (max-width: 650px) { .form { padding: 2.5rem 0; } } .form:first-of-type { padding: 9.75rem 0 3.75rem; } .has-announcement .form:first-of-type { padding: 12.5rem 0 3.75rem; } @media (max-width: 650px) { .has-announcement .form:first-of-type { padding: 9.375rem 0 4rem; } } @media (min-width: 1024px) { .form .container.html-first .form__html { grid-column: 1/span 6; order: 1; } .form .container.html-first .form__content { grid-column: 7/-1; order: 2; } } @media (min-width: 1024px) { .form .container.full-width .form__html, .form .container.full-width .form__content { grid-column: 1/-1; margin: 0 0 2.25rem; } .form .container.full-width .form__html { height: 62.5rem; } } @media (min-width: 1024px) { .form .container.full-width-html .form__html, .form .container.full-width-html .form__content { grid-column: 1/-1; margin: 0 0 2.25rem; } .form .container.full-width-html .form__html { order: 1; height: 62.5rem; } .form .container.full-width-html .form__content { order: 2; } } .form__content { color: #FCFAF9; background: #3F4D56; grid-column: span 6; padding: 1.625rem; border-radius: 0.625rem; } @media (max-width: 1024px) { .form__content { grid-column: 1/-1; margin: 0 0 2.25rem; } } @media (max-width: 650px) { .form__content { margin: 0 0 1.5rem; } } .form__content .fui-form .fui-input:not(.fui-radio-input, .fui-type-agree, .fui-checkbox-input) { background: rgb(56.5308724832, 69.0932885906, 77.1691275168); } .form__content .fui-form .fui-input:not(.fui-radio-input, .fui-type-agree, .fui-checkbox-input).fui-error { border: 1px solid rgba(246, 175, 175, 0.5); } .form__content .fui-form .fui-input:not(.fui-radio-input, .fui-type-agree, .fui-checkbox-input):active, .form__content .fui-form .fui-input:not(.fui-radio-input, .fui-type-agree, .fui-checkbox-input):focus { background: rgb(50.0617449664, 61.1865771812, 68.3382550336); border-color: rgba(252, 250, 249, 0.5); } .form__content .fui-form .fui-submit { display: inline-block; text-transform: uppercase; padding: 1.25rem 2.625rem; border-radius: 0.3125rem; font-family: "Monument Grotesk Mono", monospace; clip-path: polygon(1.25rem 0%, calc(100% - 1.25rem) 0%, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1.25rem) 100%, 1.25rem 100%, 0% calc(100% - 1rem), 0% 1rem); transition: clip-path 0.4s ease, background 0.4s; color: #FCFAF9; background: #D76447; } @media (max-width: 650px) { .form__content .fui-form .fui-submit { font-size: 0.875rem; padding: 1.125rem 2rem; } } @media (hover: hover) { .form__content .fui-form .fui-submit:hover { clip-path: polygon(0 0%, 100% 0%, 100% 0, 100% 100%, 100% 100%, 0 100%, 0% 100%, 0% 0); } .form__content .fui-form .fui-submit:hover:after { rotate: 45deg; } } @media (hover: hover) { .form__content .fui-form .fui-submit:hover { background: #00381C; } } .form__content .fui-form .fui-submit:after { content: "+"; margin: 0 0 0 0.875rem; transition: rotate 0.3s; } .form__content .fui-form .fui-submit:before { display: none; } .form__content .fui-form .fui-error-message { color: #f6afaf; } .form__html { background: #FCFAF9; grid-column: span 6; padding: 0; border-radius: 0.625rem; overflow: hidden; } @media (max-width: 1024px) { .form__html { grid-column: 1/-1; margin: 0 0 2.25rem; height: 62.5rem; } } @media (max-width: 650px) { .form__html { margin: 0 0 1.5rem; } } .form__html iframe { width: 100%; height: 100%; border: 0; } .form .fui-alert.fui-alert-error { color: #f6afaf; } .form__tagline { display: block; margin: 0 0 2rem; } @media (max-width: 650px) { .form__tagline { margin: 0 0 1.5rem; } } .form__heading { margin: 0 0 4rem; max-width: 31.25rem; } @media (max-width: 1024px) { .form__heading { max-width: none; margin: 0 0 2rem; } } .form__image { grid-column: 7/-1; border-radius: 0.625rem; overflow: hidden; } @media (max-width: 1024px) { .form__image { grid-column: 1/-1; } } :root { --fui-loading-min-height: 1rem; --fui-loading-height: 1rem; --fui-loading-width: 1rem; --fui-loading-margin-top: -0.5rem; --fui-loading-margin-left: -0.5rem; --fui-loading-border-width: 2px; --fui-loading-animation: loading 0.5s infinite linear; --fui-loading-left: 50%; --fui-loading-top: calc(50% - 1px); --fui-loading-z-index: 1; --fui-submit-btn-spinner-color: #ffffff; } .fui-form .fui-row { display: flex; gap: 2.25rem; margin: 0 0 1.5rem; } @media (max-width: 650px) { .fui-form .fui-row { gap: 1.5rem; flex-direction: column; } } .fui-form .fui-field { flex: 1; } .fui-form .fui-label, .fui-form .fui-legend, .fui-form .fui-radio-label { display: block; font-family: "Monument Grotesk Mono", monospace; text-transform: uppercase; margin: 0 0 0.75rem; } .fui-form .fui-label p, .fui-form .fui-legend p, .fui-form .fui-radio-label p { font-family: "Monument Grotesk Mono", monospace; } @media (max-width: 650px) { .fui-form .fui-label, .fui-form .fui-legend, .fui-form .fui-radio-label { font-size: 0.875rem; } } .fui-form .fui-input:not(.fui-radio-input, .fui-type-agree, .fui-checkbox-input) { width: 100%; padding: 1.75rem; border-radius: 0.625rem; background: rgba(63, 77, 86, 0.03); transition: color 0.3s, border 0.3s; border: 1px solid transparent; font-size: 1.125rem; font-family: "Monument Grotesk", sans-serif; color: currentColor; font-weight: 400; font-kerning: none; line-height: 1; letter-spacing: -0.015em; } @media (max-width: 650px) { .fui-form .fui-input:not(.fui-radio-input, .fui-type-agree, .fui-checkbox-input) { padding: 1rem 1.375rem; } } .fui-form .fui-input:not(.fui-radio-input, .fui-type-agree, .fui-checkbox-input).fui-error { border: 1px solid rgba(220, 38, 38, 0.25); } .fui-form .fui-input:not(.fui-radio-input, .fui-type-agree, .fui-checkbox-input):active, .fui-form .fui-input:not(.fui-radio-input, .fui-type-agree, .fui-checkbox-input):focus { background: rgba(63, 77, 86, 0.05); border-color: rgba(63, 77, 86, 0.5); } .fui-form .fui-input:not(.fui-radio-input, .fui-type-agree, .fui-checkbox-input)::-moz-placeholder { opacity: 1; color: #3F4D56; } .fui-form .fui-input:not(.fui-radio-input, .fui-type-agree, .fui-checkbox-input)::placeholder { opacity: 1; color: #3F4D56; } .fui-form .fui-layout-horizontal .fui-layout-wrap { display: flex; gap: 2rem; } .fui-form .fui-radio { cursor: pointer; } .fui-form .fui-radio .fui-radio-label { margin: 0; } .fui-form .fui-radio .fui-radio-label:before { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 1px solid #FCFAF9; display: inline-block; margin: 0 0.375rem 0 0; transition: border 0.3s, background 0.3s; } .fui-form .fui-radio input[type=radio] { display: none; } .fui-form .fui-radio input[type=radio]:checked + label:before { background: #A8D3E6; border-color: #A8D3E6; } .fui-form .fui-checkbox { cursor: pointer; } .fui-form .fui-checkbox .fui-checkbox-label { position: relative; display: inline-block; font-family: "Monument Grotesk Mono", monospace; text-transform: uppercase; padding-left: 1.25rem; } .fui-form .fui-checkbox .fui-checkbox-label p { font-family: "Monument Grotesk Mono", monospace; } @media (max-width: 650px) { .fui-form .fui-checkbox .fui-checkbox-label { font-size: 0.875rem; } } .fui-form .fui-checkbox .fui-checkbox-label a { text-decoration: underline; } @media (hover: hover) { .fui-form .fui-checkbox .fui-checkbox-label a:hover { text-decoration: none; } } .fui-form .fui-checkbox .fui-checkbox-label:before { content: ""; position: absolute; top: 0.25rem; left: 0; width: 0.75rem; height: 0.75rem; border-radius: 0.125rem; border: 1px solid #FCFAF9; display: inline-block; margin: 0 0.375rem 0 0; transition: border 0.3s, background 0.3s; cursor: pointer; } .fui-form .fui-checkbox input[type=checkbox] { display: none; } .fui-form .fui-checkbox input[type=checkbox]:checked + label:before { background: #A8D3E6; border-color: #A8D3E6; } .fui-form .fui-limit-text { display: none; } .fui-form .formie-recaptcha-placeholder { position: relative; z-index: 999; } .fui-form .fui-submit { display: inline-flex; align-items: center; text-transform: uppercase; color: currentColor; font-family: "Monument Grotesk Mono", monospace; font-size: max(14px, 1.125rem); cursor: pointer; } @media (max-width: 650px) { .fui-form .fui-submit { font-size: 0.875rem; } } @media (hover: hover) { .fui-form .fui-submit:hover:before { transform: scale(1.2); } } .fui-form .fui-submit:before { content: ""; width: 2.25rem; height: 2.25rem; background: currentColor; display: inline-block; margin: 0 0.75rem 0 0; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); background-size: 0.875rem; background-position: center; background-repeat: no-repeat; transition: transform 0.3s ease; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 7.36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.85 3.33-3.18-3.18c-.2-.2-.51-.2-.71 0s-.2.51 0 .71l2.33 2.33h-10.79c-.28 0-.5.22-.5.5s.22.5.5.5h10.79l-2.33 2.33c-.2.2-.2.51 0 .71s.51.2.71 0l3.18-3.18c.2-.2.2-.51 0-.71z' fill='%23fcfaf9'/%3E%3C/svg%3E"); } .fui-form .fui-error-message { font-family: "Monument Grotesk", sans-serif; color: currentColor; font-weight: 400; font-kerning: none; line-height: 1.22; letter-spacing: 0; color: #dc2626; font-size: 0.875rem; margin: 0.75rem 0 0; } .fui-alert { margin: 0 0 2rem; } .fui-alert p { font-size: 1.5rem; line-height: 1.2; } @media (max-width: 650px) { .fui-alert p { font-size: 1.125rem; } } .fui-alert.fui-alert-error { color: #dc2626; } .fui-alert-success + .fui-form { opacity: 0.5; pointer-events: none; } .gallery { padding: 3.75rem 0; } @media (max-width: 650px) { .gallery { padding: 2.5rem 0; } } .gallery:first-of-type { padding: 18.75rem 0; } @media (max-width: 1024px) { .gallery:first-of-type { padding: 15rem 0 6.25rem; } } @media (max-width: 650px) { .gallery:first-of-type { padding: 11.25rem 0 4rem; } } .gallery__heading { display: block; grid-column: 1/-1; margin: 0 0 2rem; } @media (max-width: 650px) { .gallery__heading { margin: 0 0 1.5rem; } } .gallery__categories { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0 0 3.75rem; grid-column: 1/-1; } @media (max-width: 650px) { .gallery__categories { margin: 0 0 2rem; } } .gallery__category { font-family: "Monument Grotesk", sans-serif; color: currentColor; font-weight: 400; font-kerning: none; line-height: 1; letter-spacing: -0.015em; font-size: 4.5625rem; line-height: 1; cursor: pointer; display: flex; gap: 0.75rem; align-items: baseline; color: #00381C; opacity: 0.2; transition: opacity 0.3s; } @media (max-width: 1024px) { .gallery__category { font-size: 3.875rem; } } @media (max-width: 650px) { .gallery__category { font-size: 2rem; } } .gallery__category.active { opacity: 1; } .gallery__category span { position: relative; bottom: 0.125rem; font-size: 1rem; letter-spacing: 0; } .gallery__images { display: block; transform: translateZ(0); } .gallery__image { display: block; font-size: 0; border-radius: 0.625rem; overflow: hidden; } .header { position: absolute; top: 2.25rem; left: 0; width: 100vw; z-index: 99; } .header.has-announcement { top: 5.25rem; } @media (max-width: 650px) { .header.has-announcement { top: 3.75rem; } } .header .container { display: flex; align-items: center; justify-content: space-between; } @media (max-width: 650px) { .header .container { height: 3rem; } } .header__home { display: inline-block; color: #FCFAF9; } @media (max-width: 650px) { .header__home { position: relative; top: 0.125rem; } } .header__logo { width: 17.375rem; height: auto; } [data-header-theme=dark] .header__logo { color: #00381C; } @media (max-width: 650px) { .header__logo { width: 10rem; } } .header__nav { color: #00381C; display: flex; align-items: center; position: fixed; right: 2.25rem; border-radius: 0.3125rem; padding: 0.5rem 0.5rem 0.5rem 2.25rem; } @media (max-width: 1024px) { .header__nav { top: 0; right: 0; width: 23.125rem; background: #FCFAF9; align-items: start; flex-direction: column; border-radius: 0 0 0 0.625rem; padding: 4.25rem 1.5rem 1.5rem; clip-path: inset(0 0 100% 0); transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1); max-height: calc(100dvh - 1.5rem); overflow: scroll; } .has-announcement .header__nav { padding-top: 7.5rem; } .nav-open .header__nav { clip-path: inset(0 0 0% 0); } } .header__nav ul { display: flex; align-items: center; gap: 2.25rem; } @media (max-width: 1024px) { .header__nav ul { align-items: start; flex-direction: column; width: 100%; gap: 0; } } .header__nav ul li a { font-family: "Monument Grotesk Mono", monospace; text-transform: uppercase; } .header__nav .has-children > a:after { content: "+"; display: inline-block; position: relative; top: -1px; font-size: 1rem; margin: 0 0 0 0.75rem; transition: rotate 0.3s; } .header__nav .menu-title { font-family: "Monument Grotesk Mono", monospace; text-transform: uppercase; padding: 0 0 1.25rem; opacity: 0.66; } @media (min-width: 1025px) { .header__nav .menu-title { display: none; } } @media (max-width: 1024px) { .header__nav .menu > li { width: 100%; border-bottom: 1px solid #00381C; } } @media (min-width: 1025px) { .header__nav .menu > li.current-menu-item a:before { width: 100%; } } .header__nav .menu > li > a { position: relative; transition: opacity 0.35s; } @media (max-width: 1024px) { .header__nav .menu > li > a { display: block; padding: 1.25rem 0; } } @media (min-width: 1025px) and (hover: hover) { .header__nav .menu > li > a:hover { opacity: 1; } .header__nav .menu > li > a:hover:before { right: auto; left: 0; width: 100%; } } @media (min-width: 1025px) { .header__nav .menu > li > a:before { content: ""; position: absolute; right: 0; bottom: -4px; height: 1px; width: 0%; background: currentColor; opacity: 0.25; transition: width 0.4s ease; } } .sub-menu-open .header__nav .menu > li > a { opacity: 0.3; } .header__nav .menu > li.open > a { opacity: 1; } .header__nav .menu > li.open > a:after { rotate: 45deg; } @media (min-width: 1025px) { .header__nav .sub-menu-container { position: absolute; top: 0; right: 0; width: 81.25rem; height: 33.125rem !important; display: block !important; padding: 1.5rem; border-radius: 0.625rem; opacity: 0; transition: opacity 0.4s ease !important; pointer-events: none; z-index: -1; } .header__nav .sub-menu-container.open { opacity: 1; pointer-events: auto; transition: opacity 0.4s 0.15s ease !important; } } .header__nav .sub-menu-container.open li { pointer-events: auto; } @media (min-width: 1025px) { .header__nav .sub-menu-container:before { content: ""; position: absolute; top: 5.125rem; left: 0.75rem; right: 0.75rem; border-bottom: 1px solid rgba(0, 56, 28, 0.3); } } .header__nav .sub-menu { height: 100%; align-items: start; justify-content: end; flex-direction: column; pointer-events: none; gap: 0; } .header__nav .sub-menu > li { transition: opacity 0.15s; } .header__nav .sub-menu > li.current-menu-item { color: #D76447; } .header__nav .sub-menu:hover > li { opacity: 0.2; } .header__nav .sub-menu > li:hover { opacity: 1; } @media (max-width: 1024px) { .header__nav .sub-menu { padding: 0.375rem 0; } } @media (min-width: 1025px) { .header__nav .sub-menu li { overflow: hidden; } } @media (max-width: 1024px) { .header__nav .sub-menu li { margin: 0 0 0.75rem; } } @media (min-width: 1025px) { .header__nav .sub-menu > li > a:after { top: -0.25rem; font-size: 1.5rem; } } .header__nav .sub-menu li a { font-size: 2.5rem; line-height: 1.2; font-family: "Monument Grotesk", sans-serif; text-transform: none; } @media (max-width: 1024px) { .header__nav .sub-menu li a { font-size: 2.25rem; } } @media (max-width: 650px) { .header__nav .sub-menu li a { font-size: 1.5rem; } } @media (min-width: 1025px) { .header__nav .sub-menu li a { display: inline-block; transform: translateY(100%); transition: transform 0.2s; } } @media (max-width: 1024px) { .header__nav .sub-menu li a { font-size: 1.5rem; } } @media (min-width: 1025px) { .header__nav .sub-menu-container.open .sub-menu li a { transform: translateY(0%); transition: transform 0.8s 0.15s ease; } } @media (min-width: 1025px) { .header__nav .sub-sub-menu-container { position: absolute; top: 5.875rem; left: 18.75rem; right: 0.75rem; height: calc(100% - 6.625rem) !important; display: block !important; opacity: 0; pointer-events: none; transition: opacity 0.4s !important; } .header__nav .sub-sub-menu-container.visible { opacity: 1; pointer-events: auto; } } @media (min-width: 1025px) { .header__nav .sub-sub-menu { height: 100%; display: grid; gap: 0 2.25rem; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; grid-template-rows: repeat(2, 1fr); } } @media (min-width: 1025px) and (max-width: 650px) { .header__nav .sub-sub-menu { gap: 0 1.5rem; } } @media (max-width: 1024px) { .header__nav .sub-sub-menu { padding: 1.5rem 0 0.375rem; } } @media (min-width: 1025px) { .header__nav .sub-sub-menu li { width: 100%; height: 100%; border-radius: 0.375rem; border: 1px solid #3F4D56; overflow: hidden; } } @media (max-width: 1024px) { .header__nav .sub-sub-menu li { margin: 0 0 0.5rem; } } .header__nav .sub-sub-menu li a { position: relative; display: block; height: 100%; } .header__nav .sub-sub-menu li a span { display: block; font-family: "Monument Grotesk Mono", monospace; text-transform: uppercase; font-size: 1rem; } .header__nav .sub-sub-menu li a span p { font-family: "Monument Grotesk Mono", monospace; } @media (max-width: 650px) { .header__nav .sub-sub-menu li a span { font-size: 0.875rem; } } @media (min-width: 1025px) { .header__nav .sub-sub-menu li a span { position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 2; } } .header__nav .sub-sub-menu li a img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 1024px) { .header__nav .sub-sub-menu li a img { display: none; } } .header__nav .menu-cta { position: absolute; right: 0.75rem; bottom: 0.75rem; color: #FCFAF9; width: 24.375rem; aspect-ratio: 390/414; font-family: "Monument Grotesk", sans-serif; text-transform: none; border-radius: 0.625rem; opacity: 0; transition: opacity 0.4s; overflow: hidden; z-index: -1; } .header__nav .menu-cta.visible { opacity: 1; z-index: auto; } @media (max-width: 1024px) { .header__nav .menu-cta { display: none; } } @media (hover: hover) { .header__nav .menu-cta:hover .menu-cta-image { transform: scale(1.1); } } .header__nav .menu-cta.colour-black { color: #3F4D56; background: #3F4D56; } .header__nav .menu-cta.mask-hexagon { -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 390 414' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m88.53 0h208.79c2.65 0 5.2 1.05 7.07 2.93 31.8 31.76 50.87 50.8 82.67 82.56 1.88 1.88 2.94 4.42 2.94 7.08v311.44c0 5.52-4.48 10-10 10h-370c-5.52 0-10-4.48-10-10v-311.45c0-2.65 1.06-5.2 2.94-7.08 32.76-32.71 52.01-51.94 85.59-85.48z'/%3E%3C/svg%3E") center center/cover; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 390 414' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m88.53 0h208.79c2.65 0 5.2 1.05 7.07 2.93 31.8 31.76 50.87 50.8 82.67 82.56 1.88 1.88 2.94 4.42 2.94 7.08v311.44c0 5.52-4.48 10-10 10h-370c-5.52 0-10-4.48-10-10v-311.45c0-2.65 1.06-5.2 2.94-7.08 32.76-32.71 52.01-51.94 85.59-85.48z'/%3E%3C/svg%3E") center center/cover; } .header__nav .menu-cta.mask-octagon { -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 389 413' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m389 146.69v256.81c0 5.25-4.25 9.5-9.5 9.5h-370c-5.25 0-9.5-4.25-9.5-9.5v-256.81c0-1.58.4-3.14 1.15-4.53l47.75-88.04c.83-1.53 2.06-2.8 3.56-3.68l84.3-49.15c1.45-.85 3.1-1.29 4.79-1.29h105.9c1.68 0 3.33.45 4.78 1.29l84.3 49.15c1.5.88 2.74 2.15 3.56 3.68l47.75 88.04c.75 1.39 1.15 2.95 1.15 4.53z'/%3E%3C/svg%3E") center center/cover; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 389 413' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m389 146.69v256.81c0 5.25-4.25 9.5-9.5 9.5h-370c-5.25 0-9.5-4.25-9.5-9.5v-256.81c0-1.58.4-3.14 1.15-4.53l47.75-88.04c.83-1.53 2.06-2.8 3.56-3.68l84.3-49.15c1.45-.85 3.1-1.29 4.79-1.29h105.9c1.68 0 3.33.45 4.78 1.29l84.3 49.15c1.5.88 2.74 2.15 3.56 3.68l47.75 88.04c.75 1.39 1.15 2.95 1.15 4.53z'/%3E%3C/svg%3E") center center/cover; } .header__nav .menu-cta-inner { position: absolute; top: 1px; left: 1px; right: 1px; bottom: 1px; background: #FCFAF9; border-radius: 0.5625rem; } .header__nav .menu-cta-inner.mask-hexagon { -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 390 414' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m88.53 0h208.79c2.65 0 5.2 1.05 7.07 2.93 31.8 31.76 50.87 50.8 82.67 82.56 1.88 1.88 2.94 4.42 2.94 7.08v311.44c0 5.52-4.48 10-10 10h-370c-5.52 0-10-4.48-10-10v-311.45c0-2.65 1.06-5.2 2.94-7.08 32.76-32.71 52.01-51.94 85.59-85.48z'/%3E%3C/svg%3E") center center/cover; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 390 414' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m88.53 0h208.79c2.65 0 5.2 1.05 7.07 2.93 31.8 31.76 50.87 50.8 82.67 82.56 1.88 1.88 2.94 4.42 2.94 7.08v311.44c0 5.52-4.48 10-10 10h-370c-5.52 0-10-4.48-10-10v-311.45c0-2.65 1.06-5.2 2.94-7.08 32.76-32.71 52.01-51.94 85.59-85.48z'/%3E%3C/svg%3E") center center/cover; } .header__nav .menu-cta-inner.mask-octagon { -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 389 413' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m389 146.69v256.81c0 5.25-4.25 9.5-9.5 9.5h-370c-5.25 0-9.5-4.25-9.5-9.5v-256.81c0-1.58.4-3.14 1.15-4.53l47.75-88.04c.83-1.53 2.06-2.8 3.56-3.68l84.3-49.15c1.45-.85 3.1-1.29 4.79-1.29h105.9c1.68 0 3.33.45 4.78 1.29l84.3 49.15c1.5.88 2.74 2.15 3.56 3.68l47.75 88.04c.75 1.39 1.15 2.95 1.15 4.53z'/%3E%3C/svg%3E") center center/cover; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 389 413' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m389 146.69v256.81c0 5.25-4.25 9.5-9.5 9.5h-370c-5.25 0-9.5-4.25-9.5-9.5v-256.81c0-1.58.4-3.14 1.15-4.53l47.75-88.04c.83-1.53 2.06-2.8 3.56-3.68l84.3-49.15c1.45-.85 3.1-1.29 4.79-1.29h105.9c1.68 0 3.33.45 4.78 1.29l84.3 49.15c1.5.88 2.74 2.15 3.56 3.68l47.75 88.04c.75 1.39 1.15 2.95 1.15 4.53z'/%3E%3C/svg%3E") center center/cover; } .header__nav .menu-cta-content { position: absolute; left: 1rem; bottom: 1rem; } .header__nav .menu-cta-heading { margin: 0.25rem 0 0.75rem; } .header__nav .menu-cta-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .header__nav .menu-cta-image:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; background: rgba(63, 77, 86, 0.4); mix-blend-mode: multiply; } .header__nav-bg { background: #FCFAF9; position: absolute; top: 0; right: 0; width: 100%; height: 100%; border-radius: 0.625rem; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: -2; } @media (max-width: 1024px) { .header__nav-bg { display: none; } } [data-header-theme=dark] .header__nav-bg { background: #F5F2EF; } .sub-menu-open .header__nav-bg { width: 81.25rem; height: 33.125rem; } .header__cta { margin: 0 0 0 2.75rem; padding: 1.375rem 0.75rem 1.375rem 2.625rem; clip-path: polygon(1rem 0%, 100% 0, 100% 1rem, 100% calc(100% - 1rem), 100% 100%, 1rem 100%, 0% calc(100% - 1rem), 0% 1rem); } @media (hover: hover) { .header__cta:hover { clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 0 100%, 0% calc(100% - 1rem), 0% 1rem); } .header__cta:hover span { transform: translateX(-0.625rem); } } .header__cta span { display: inline-block; transition: transform 0.3s; } @media (max-width: 1024px) { .header__cta { margin: 6.25rem 0 0; } } .header__menu-button { width: 3rem; height: 3rem; background-size: cover; background-color: #FCFAF9; -webkit-mask: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.594 1.46446C13.5317 0.526784 14.8034 0 16.1295 0H31.8705C33.1966 0 34.4683 0.526784 35.406 1.46447L46.5355 12.594C47.4732 13.5317 48 14.8034 48 16.1295V31.8705C48 33.1966 47.4732 34.4683 46.5355 35.406L35.406 46.5355C34.4683 47.4732 33.1966 48 31.8705 48H16.1295C14.8034 48 13.5317 47.4732 12.594 46.5355L1.46447 35.406C0.526783 34.4683 0 33.1966 0 31.8705V16.1295C0 14.8034 0.526783 13.5317 1.46447 12.594L12.594 1.46446Z' fill='%23FCFAF9'/%3E%3C/svg%3E%0A") center center/cover; mask: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.594 1.46446C13.5317 0.526784 14.8034 0 16.1295 0H31.8705C33.1966 0 34.4683 0.526784 35.406 1.46447L46.5355 12.594C47.4732 13.5317 48 14.8034 48 16.1295V31.8705C48 33.1966 47.4732 34.4683 46.5355 35.406L35.406 46.5355C34.4683 47.4732 33.1966 48 31.8705 48H16.1295C14.8034 48 13.5317 47.4732 12.594 46.5355L1.46447 35.406C0.526783 34.4683 0 33.1966 0 31.8705V16.1295C0 14.8034 0.526783 13.5317 1.46447 12.594L12.594 1.46446Z' fill='%23FCFAF9'/%3E%3C/svg%3E%0A") center center/cover; transition: background 0.4s, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); position: relative; position: fixed; cursor: pointer; right: 2.25rem; } .nav-open .header__menu-button { background-color: #00381C; transform: rotate(45deg); } [data-header-theme=dark] .header__menu-button { background-color: #00381C; } @media (min-width: 1025px) { .header__menu-button { display: none; } } @media (max-width: 650px) { .header__menu-button { right: 1.5rem; } } .header__menu-button:after { content: ""; width: 0.75rem; height: 0.75rem; background-color: #00381C; mask: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.98182 12V0H7.01818V12H4.98182ZM0 7.01818V4.98182H12V7.01818H0Z' fill='%2300381C'/%3E%3C/svg%3E%0A") center center/cover; -webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.98182 12V0H7.01818V12H4.98182ZM0 7.01818V4.98182H12V7.01818H0Z' fill='%2300381C'/%3E%3C/svg%3E%0A") center center/cover; transition: background 0.3s; position: absolute; top: 50%; left: 50%; translate: -50% -50%; } .nav-open .header__menu-button:after { background-color: #FCFAF9; } [data-header-theme=dark] .header__menu-button:after { background-color: #FCFAF9; } .header__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: fixed; opacity: 0; background: rgba(63, 77, 86, 0.4); transition: opacity 0.3s; pointer-events: none; z-index: 98; } .nav-open .header__overlay { opacity: 1; pointer-events: auto; } .highlight { padding: 6.25rem 0; } @media (max-width: 650px) { .highlight { padding: 4rem 0; } } .highlight__content { grid-column: 4/-4; } @media (max-width: 1024px) { .highlight__content { grid-column: 2/-2; } } @media (max-width: 650px) { .highlight__content { grid-column: 1/-1; } } .highlight__text { margin: 0 0 4rem; } @media (max-width: 650px) { .highlight__text { margin: 0 0 2rem; } } .highlight__text .char { opacity: 0.2; } .html-block { padding: 6.25rem 0; } .hub-preview { color: #00381C; background: #FCFAF9; padding: 7.5rem 0; position: relative; } @media (max-width: 650px) { .hub-preview { padding: 2.5rem 0; } .hub-preview:last-of-type { padding: 2.5rem 0 5rem; } } .hub-preview--related:before { content: ""; position: absolute; top: 0; left: 2.25rem; right: 2.25rem; height: 1px; background: rgba(0, 56, 28, 0.3); } @media (max-width: 650px) { .hub-preview--related:before { left: 1.5rem; right: 1.5rem; } } .hub-preview__tagline { margin: 0 0 2rem; grid-column: 1/span 3; } @media (max-width: 650px) { .hub-preview__tagline { margin: 0 0 1.5rem; } } .hub-preview__heading { grid-column: 1/span 3; } @media (max-width: 1024px) { .hub-preview__heading { grid-column: 1/span 6; } } @media (max-width: 650px) { .hub-preview__heading { grid-column: 1/-1; margin: 0 0 2rem; } } .hub-preview__button { align-self: end; grid-column: 4/span 2; } @media (max-width: 1024px) { .hub-preview__button { grid-column: 8/span 4; } } @media (max-width: 650px) { .hub-preview__button { grid-column: 1/span 4; } } .hub-preview__navigation { grid-column: -2; display: flex; align-self: end; justify-content: end; gap: 0.75rem; } @media (max-width: 650px) { .hub-preview__navigation { grid-column: 5/-1; justify-content: start; } } .hub-preview__slider { grid-column: 1/-1; margin: 2rem 0 0; } .hub { color: #00381C; padding: 7.5rem 0; } @media (max-width: 650px) { .hub { padding: 2.5rem 0; } } .hub__heading { display: block; grid-column: 1/-1; margin: 0 0 2rem; } @media (max-width: 650px) { .hub__heading { margin: 0 0 1.5rem; } } .hub__categories { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0 0 3.75rem; grid-column: 1/-1; } @media (max-width: 650px) { .hub__categories { margin: 0 0 2rem; } } .hub__category { font-family: "Monument Grotesk", sans-serif; color: currentColor; font-weight: 400; font-kerning: none; line-height: 1; letter-spacing: -0.015em; font-size: 4.5625rem; line-height: 1; cursor: pointer; display: flex; gap: 0.75rem; align-items: baseline; color: #00381C; opacity: 0.2; transition: opacity 0.3s; } @media (max-width: 1024px) { .hub__category { font-size: 3.875rem; } } @media (max-width: 650px) { .hub__category { font-size: 2rem; } } .hub__category.active { opacity: 1; } .hub__category span { position: relative; bottom: 0.125rem; font-size: 1rem; letter-spacing: 0; } .hub__entries { display: grid; gap: 0 2.25rem; grid-template-columns: repeat(4, 1fr); gap: 3.75rem 2.25rem; grid-column: 1/-1; } @media (max-width: 650px) { .hub__entries { gap: 0 1.5rem; } } @media (max-width: 1024px) { .hub__entries { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 650px) { .hub__entries { gap: 3.125rem; grid-template-columns: repeat(1, 1fr); } } .hub__pagination { grid-column: 1/-1; margin: 7.5rem 0 0; } @media (max-width: 650px) { .hub__pagination { margin: 4rem 0 0; } } .sprig-component:first-child .hub { padding: 18.75rem 0 7.5rem; } @media (max-width: 1024px) { .sprig-component:first-child .hub { padding: 15rem 0 6.25rem; } } @media (max-width: 650px) { .sprig-component:first-child .hub { padding: 11.25rem 0 4rem; } } .large-media { position: relative; padding: 0 0 7.5rem; } @media (max-width: 1024px) { .large-media { padding: 0 0 3.75rem; } } @media (max-width: 650px) { .large-media { padding: 0 0 2.5rem; } } .large-media__video { position: relative; aspect-ratio: 16/9; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 100% 100%, 0 100%, 0% 50%); border-radius: 0.625rem; overflow: hidden; } @media (max-width: 650px) { .large-media__video { aspect-ratio: 4/3; } } .large-media__poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .large-media__play { position: absolute; top: 50%; left: 50%; translate: -50% -50%; } .page-banner { padding: 18.75rem 0 9.375rem; } @media (max-width: 1024px) { .page-banner { padding: 15rem 0 6.25rem; } } @media (max-width: 650px) { .page-banner { padding: 11.25rem 0 4rem; } } .page-banner.align-left { padding-bottom: 3.75rem; } @media (max-width: 650px) { .page-banner.align-left { padding-bottom: 2rem; } } .page-banner.align-left .container { border-bottom: 1px solid rgba(0, 56, 28, 0.3); } .page-banner__content { grid-column: 3/-3; text-align: center; } @media (max-width: 1024px) { .page-banner__content { grid-column: 1/-1; } } .align-left .page-banner__content { text-align: left; grid-column: 1/span 7; padding: 0 0 3.125rem; } @media (max-width: 1024px) { .align-left .page-banner__content { grid-column: 1/-1; } } @media (max-width: 650px) { .align-left .page-banner__content { padding: 0 0 2rem; } } .page-banner__tagline { display: block; margin: 0 0 2rem; } @media (max-width: 650px) { .page-banner__tagline { margin: 0 0 1.5rem; } } .page-banner__heading .char { opacity: 0.2; } .page-banner__button { margin: 3.125rem 0 0; } .player { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; background: rgba(63, 77, 86, 0.98); opacity: 0; clip-path: inset(0% 50% 0% 50%); transition: clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0s 0.55s; } .player.open { opacity: 1; clip-path: inset(0% 0% 0% 0%); transition: clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0s; } .player__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .player__close { position: absolute; top: 2.25rem; right: 2.25rem; width: 3rem; height: 3rem; background: #D76447; cursor: pointer; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); } .player__close:after { content: ""; width: 0.875rem; height: 0.875rem; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.98182 12V0H7.01818V12H4.98182ZM0 7.01818V4.98182H12V7.01818H0Z' fill='%2300381C'/%3E%3C/svg%3E%0A"); rotate: 45deg; position: absolute; top: 50%; left: 50%; translate: -50% -50%; } .policy { color: #00381C; background: #FCFAF9; padding: 18.75rem 0 9.375rem; } @media (max-width: 1024px) { .policy { padding: 15rem 0 6.25rem; } } @media (max-width: 650px) { .policy { padding: 11.25rem 0 4rem; } } .policy .container { max-width: 56.25rem; } .policy__heading { margin: 0 0 4rem; } .popup { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .popup.visible { opacity: 1; pointer-events: auto; } .popup__window { position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; gap: 0 2.25rem; grid-template-columns: repeat(2, 1fr); color: #00381C; background: #FCFAF9; border-radius: 0.3125rem; max-width: 62.5rem; width: calc(100vw - 3rem); padding: 0.75rem 1.5rem 0.75rem 0.75rem; transition: scale 0.4s ease; scale: 0.8; z-index: 2; } @media (max-width: 650px) { .popup__window { gap: 0 1.5rem; } } .visible .popup__window { scale: 1; } @media (max-width: 650px) { .popup__window { padding: 0.75rem; grid-template-columns: repeat(1, 1fr); } } .popup__image { border-radius: 0.3125rem; clip-path: polygon(0 0, 80% 0, 100% 25%, 100% 75%, 80% 100%, 0 100%); overflow: hidden; } @media (max-width: 650px) { .popup__image { margin: 0 0 0.75rem; } } .popup__content { display: flex; align-items: start; flex-direction: column; } .popup__tagline { display: block; margin: 0.75rem 0 1rem; } @media (max-width: 650px) { .popup__tagline { margin: 0.25rem 0 0.5rem; } } .popup__heading { margin: 0 0 1rem; } @media (max-width: 650px) { .popup__heading { margin: 0 0 0.5rem; } } .popup__text { margin: 0 0 1.5rem; } .popup__button { margin: auto 0 0.75rem; } .popup__close { position: absolute; top: -1.125rem; right: 0; transform: translateY(-100%); width: 3rem; height: 3rem; background: #FCFAF9; cursor: pointer; transition: background 0.3s; -webkit-mask: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.594 1.46446C13.5317 0.526784 14.8034 0 16.1295 0H31.8705C33.1966 0 34.4683 0.526784 35.406 1.46447L46.5355 12.594C47.4732 13.5317 48 14.8034 48 16.1295V31.8705C48 33.1966 47.4732 34.4683 46.5355 35.406L35.406 46.5355C34.4683 47.4732 33.1966 48 31.8705 48H16.1295C14.8034 48 13.5317 47.4732 12.594 46.5355L1.46447 35.406C0.526783 34.4683 0 33.1966 0 31.8705V16.1295C0 14.8034 0.526783 13.5317 1.46447 12.594L12.594 1.46446Z' fill='%23FCFAF9'/%3E%3C/svg%3E%0A") center center/cover; mask: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.594 1.46446C13.5317 0.526784 14.8034 0 16.1295 0H31.8705C33.1966 0 34.4683 0.526784 35.406 1.46447L46.5355 12.594C47.4732 13.5317 48 14.8034 48 16.1295V31.8705C48 33.1966 47.4732 34.4683 46.5355 35.406L35.406 46.5355C34.4683 47.4732 33.1966 48 31.8705 48H16.1295C14.8034 48 13.5317 47.4732 12.594 46.5355L1.46447 35.406C0.526783 34.4683 0 33.1966 0 31.8705V16.1295C0 14.8034 0.526783 13.5317 1.46447 12.594L12.594 1.46446Z' fill='%23FCFAF9'/%3E%3C/svg%3E%0A") center center/cover; } @media (hover: hover) { .popup__close:hover { background: #D76447; } } .popup__close:after { content: ""; width: 0.875rem; height: 0.875rem; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.98182 12V0H7.01818V12H4.98182ZM0 7.01818V4.98182H12V7.01818H0Z' fill='%2300381C'/%3E%3C/svg%3E%0A"); rotate: 45deg; position: absolute; top: 50%; left: 50%; translate: -50% -50%; } .popup__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; background: rgba(63, 77, 86, 0.4); } .preloader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #FCFAF9; z-index: 999; } .preloader__animation { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 37.5rem; } @media (max-width: 1024px) { .preloader__animation { width: 25rem; } } @media (max-width: 650px) { .preloader__animation { width: 15.625rem; } } .preloader__loading { position: absolute; left: 50%; transform: translateX(-50%); position: fixed; width: 56.625rem; bottom: 7.5rem; background: rgba(0, 56, 28, 0.2); height: 1px; } @media (max-width: 1024px) { .preloader__loading { width: 37.5rem; } } @media (max-width: 650px) { .preloader__loading { width: 18.75rem; bottom: 5rem; } } .preloader__loading span { position: absolute; top: 0; left: 0; width: 0%; height: 100%; background-color: #00381C; } .preloader__loading span:after { content: attr(data-count); position: absolute; top: -2rem; right: 0; color: #00381C; font-family: "Monument Grotesk Mono", monospace; } .process { color: #3F4D56; background: #FCFAF9; padding: 3.75rem 0 5rem; } @media (max-width: 650px) { .process { padding: 2.5rem 0 5rem; } } .process__tagline { display: block; margin: 0 0 2rem; } @media (max-width: 650px) { .process__tagline { margin: 0 0 1.5rem; } } .process__content { grid-column: span 4; } @media (max-width: 1024px) { .process__content { grid-column: 1/-4; margin: 0 0 4rem; } } @media (max-width: 650px) { .process__content { grid-column: 1/-1; margin: 0 0 2rem; } } .process__slider { grid-column: span 8; } @media (max-width: 1024px) { .process__slider { grid-column: 1/-1; } } .process__slide { display: flex; flex-direction: column; position: relative; padding: 2.25rem; height: 37.5rem; counter-increment: count; border-radius: 0.625rem; overflow: hidden; } @media (max-width: 1024px) { .process__slide { height: 31.25rem; padding: 1.5rem; } } @media (max-width: 650px) { .process__slide { padding: 0.75rem; height: 23.4375rem; } } .process__slide:nth-child(odd) { color: #3F4D56; background: #A8D3E6; } .process__slide.has-image, .process__slide.colour-3F4D56 { color: #FCFAF9; } .process__slide.mask-hexagon { -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 749 880' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 223.39v646.61c0 5.52 4.48 10 10 10h729c5.52 0 10-4.48 10-10v-646.61c0-2.65-1.05-5.2-2.93-7.07l-213.51-213.39c-1.88-1.87-4.42-2.93-7.07-2.93h-302c-2.65 0-5.19 1.05-7.07 2.93l-213.49 213.39c-1.88 1.88-2.93 4.42-2.93 7.07z'/%3E%3C/svg%3E") center center/cover; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 749 880' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 223.39v646.61c0 5.52 4.48 10 10 10h729c5.52 0 10-4.48 10-10v-646.61c0-2.65-1.05-5.2-2.93-7.07l-213.51-213.39c-1.88-1.87-4.42-2.93-7.07-2.93h-302c-2.65 0-5.19 1.05-7.07 2.93l-213.49 213.39c-1.88 1.88-2.93 4.42-2.93 7.07z'/%3E%3C/svg%3E") center center/cover; } .process__slide.mask-octagon { -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 749 880' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m739 880c5.52 0 10-4.48 10-10v-589.83c0-1.67-.42-3.31-1.21-4.77l-94.05-173.28c-.87-1.61-2.17-2.95-3.75-3.87l-166.28-96.89c-1.53-.89-3.27-1.36-5.03-1.36h-208.37c-1.77 0-3.51.47-5.04 1.36l-166.25 96.89c-1.58.92-2.88 2.26-3.75 3.87l-94.06 173.28c-.79 1.46-1.21 3.1-1.21 4.77v589.83c0 5.52 4.48 10 10 10z'/%3E%3C/svg%3E") center center/cover; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 749 880' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m739 880c5.52 0 10-4.48 10-10v-589.83c0-1.67-.42-3.31-1.21-4.77l-94.05-173.28c-.87-1.61-2.17-2.95-3.75-3.87l-166.28-96.89c-1.53-.89-3.27-1.36-5.03-1.36h-208.37c-1.77 0-3.51.47-5.04 1.36l-166.25 96.89c-1.58.92-2.88 2.26-3.75 3.87l-94.06 173.28c-.79 1.46-1.21 3.1-1.21 4.77v589.83c0 5.52 4.48 10 10 10z'/%3E%3C/svg%3E") center center/cover; } .process__slide.mask-none .process__title { margin: 0 0 auto; } .process__title, .process__step { position: relative; z-index: 2; } .process__title { line-height: 1; margin: auto 0 4rem; } .process__title.font-h2 { font-size: 3.125rem; } @media (max-width: 1024px) { .process__title.font-h2 { font-size: 2.5rem; } } @media (max-width: 650px) { .process__title.font-h2 { font-size: 2rem; } } @media (max-width: 1024px) { .process__title.font-h3 { font-size: 2.25rem; } } @media (max-width: 650px) { .process__title.font-h3 { font-size: 1.75rem; } } @media (max-width: 1024px) { .process__title { font-size: 2.875rem; } } @media (max-width: 650px) { .process__title { font-size: 1.5rem; margin: auto 0 2rem; } } .process__step:before { content: counters(count, "", decimal-leading-zero); margin: 0 6.25rem 0 0; } @media (max-width: 650px) { .process__step:before { margin: 0 2rem 0 0; } } .process__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .process__image:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; background: rgba(63, 77, 86, 0.45); } .process__controls { display: flex; align-items: center; gap: 4rem; } .process__controls div.swiper-scrollbar.swiper-scrollbar-horizontal { top: 0; margin: 0; } .process__navigation { display: flex; align-items: center; gap: 0.75rem; } .project { color: #00381C; background: #FCFAF9; padding: 18.75rem 0 0; margin: 0 0 9.375rem; } @media (max-width: 1024px) { .project { padding: 15rem 0 6.25rem; } } @media (max-width: 650px) { .project { padding: 11.25rem 0 4rem; } } .project__images { grid-column: span 9; display: grid; gap: 0 2.25rem; grid-template-columns: repeat(2, 1fr); gap: 2.25rem; } @media (max-width: 650px) { .project__images { gap: 0 1.5rem; } } @media (max-width: 1024px) { .project__images { grid-column: 1/-1; } } @media (max-width: 650px) { .project__images { gap: 1.5rem; } } .project__image { display: block; position: relative; border-radius: 0.625rem; overflow: hidden; } .project__image--full { grid-column: 1/-1; aspect-ratio: 16/9; } .project__image--half { aspect-ratio: 1/1; } .project__content { grid-row: 1; grid-column: 10/span 3; padding: 0 0 0 2.25rem; display: flex; align-self: start; flex-direction: column; position: relative; } @media (max-width: 1024px) { .project__content { height: auto; grid-column: 1/-1; padding: 0 0 2rem; margin: 0 0 4rem; border-bottom: 1px solid rgba(0, 56, 28, 0.3); } } .project__progress { position: absolute; top: 0; left: 0; width: 1.5px; height: 100%; background-color: rgba(0, 56, 28, 0.3); } @media (max-width: 1024px) { .project__progress { display: none; } } .project__progress span { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: #00381C; } .project__heading { margin: 0 0 2rem; } .project__text { margin: 0 0 7.5rem; } @media (max-width: 1024px) { .project__text { margin: 0 0 4rem; } } .project__text p { margin: 0 0 1.5rem; } .project__share { margin: auto 0 0; } .project__share-links { display: flex; gap: 1.25rem; } .project__share-link { opacity: 0.7; cursor: pointer; position: relative; transition: opacity 0.35s; } @media (hover: hover) { .project__share-link:hover { opacity: 1; } .project__share-link:hover:after { right: auto; left: 0; width: 100%; } } .project__share-link:after { content: ""; position: absolute; right: 0; bottom: -2px; height: 1px; width: 0%; background: currentColor; transition: width 0.4s ease; } .reviews { color: #00381C; background: #FCFAF9; padding: 7.5rem 0; } @media (max-width: 650px) { .reviews { padding: 2.5rem 0 5rem; } } .reviews__tagline { grid-column: 1/span 6; margin: 0 0 2rem; } @media (max-width: 1024px) { .reviews__tagline { grid-column: 1/-2; } } @media (max-width: 650px) { .reviews__tagline { grid-column: 1/-1; } } .reviews__heading { grid-column: 1/span 6; } @media (max-width: 1024px) { .reviews__heading { grid-column: 1/-2; } } @media (max-width: 650px) { .reviews__heading { grid-column: 1/-1; } } .reviews__navigation { grid-column: -2; display: flex; align-self: end; justify-content: end; gap: 0.75rem; } @media (max-width: 1024px) { .reviews__navigation { grid-column: 11/-1; } } @media (max-width: 650px) { .reviews__navigation { grid-column: 5/-1; justify-content: start; margin: 2rem 0 0; } } .reviews__trustpilot { align-self: end; grid-column: 10/-1; margin: 1.5rem 0 0; } @media (max-width: 1024px) { .reviews__trustpilot { grid-row: 3; grid-column: 1/-5; margin: 4rem 0 0; } } @media (max-width: 650px) { .reviews__trustpilot { grid-column: 1/-3; margin: 2rem 0 0; } } .reviews__trustpilot iframe { height: 1.875rem; } @media (max-width: 1024px) { .reviews__trustpilot iframe { width: 420px !important; } } @media (max-width: 650px) { .reviews__trustpilot iframe { width: 195px !important; height: 42px; } } .reviews__slider { grid-column: 1/-1; margin: 5rem 0 0; } @media (max-width: 650px) { .reviews__slider { margin: 2.5rem 0 0; } } .reviews__slider .swiper-wrapper { height: auto; } .reviews__slide { padding: 1.5rem; border-radius: 0.625rem; text-align: center; } @media (max-width: 650px) { .reviews__slide { padding: 1.5rem 1.125rem; } } .reviews__slide:after { content: ""; position: absolute; left: 1.5rem; bottom: 1.5rem; width: 2rem; height: 2rem; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg width='31' height='32' viewBox='0 0 31 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.8138 13.715V19.205H24.7832C24.4175 21.56 22.0701 26.105 15.8138 26.105C10.4173 26.105 6.00925 21.58 6.00925 16.005C6.00925 10.43 10.4124 5.9 15.8138 5.9C18.8827 5.9 20.9434 7.225 22.1146 8.37L26.4091 4.19C23.6515 1.575 20.0835 0 15.8138 0C7.07174 0 0 7.155 0 16C0 24.845 7.07174 32 15.8138 32C24.5559 32 31 25.505 31 16.365C31 15.315 30.8913 14.515 30.7529 13.715H15.8187V13.71L15.8138 13.715Z' fill='%23FAF3ED' fill-opacity='0.2'/%3E%3C/svg%3E%0A"); } @media (max-width: 650px) { .reviews__slide:after { display: none; } } .reviews__slide:nth-child(4n+1) { color: #FCFAF9; background: #00381C; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 435 532' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m425 532c5.52 0 10-4.48 10-10v-358.22c0-1.67-.42-3.31-1.21-4.77l-53.55-98.67c-.87-1.61-2.17-2.95-3.75-3.87l-94.59-55.11c-1.53-.89-3.27-1.36-5.04-1.36h-118.75c-1.77 0-3.51.47-5.04 1.36l-94.55 55.11c-1.58.92-2.88 2.26-3.75 3.87l-53.56 98.67c-.79 1.46-1.21 3.1-1.21 4.77v358.22c0 5.52 4.48 10 10 10z'/%3E%3C/svg%3E") center center/cover; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 435 532' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m425 532c5.52 0 10-4.48 10-10v-358.22c0-1.67-.42-3.31-1.21-4.77l-53.55-98.67c-.87-1.61-2.17-2.95-3.75-3.87l-94.59-55.11c-1.53-.89-3.27-1.36-5.04-1.36h-118.75c-1.77 0-3.51.47-5.04 1.36l-94.55 55.11c-1.58.92-2.88 2.26-3.75 3.87l-53.56 98.67c-.79 1.46-1.21 3.1-1.21 4.77v358.22c0 5.52 4.48 10 10 10z'/%3E%3C/svg%3E") center center/cover; } .reviews__slide:nth-child(4n+2) { color: #00381C; background: #A8D3E6; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 435 416' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 131.52v274.48c0 5.52 4.48 10 10 10h415c5.52 0 10-4.48 10-10v-274.48c0-2.65-1.05-5.2-2.93-7.07l-121.55-121.52c-1.88-1.87-4.42-2.93-7.07-2.93h-171.92c-2.65 0-5.2 1.05-7.07 2.93l-121.53 121.52c-1.88 1.88-2.93 4.42-2.93 7.07z'/%3E%3C/svg%3E") center center/cover; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 435 416' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 131.52v274.48c0 5.52 4.48 10 10 10h415c5.52 0 10-4.48 10-10v-274.48c0-2.65-1.05-5.2-2.93-7.07l-121.55-121.52c-1.88-1.87-4.42-2.93-7.07-2.93h-171.92c-2.65 0-5.2 1.05-7.07 2.93l-121.53 121.52c-1.88 1.88-2.93 4.42-2.93 7.07z'/%3E%3C/svg%3E") center center/cover; } .reviews__slide:nth-child(4n+2) .reviews__text { margin: 6.25rem 0 5.25rem; } @media (max-width: 650px) { .reviews__slide:nth-child(4n+2) .reviews__text { margin: 4rem 0; } } .reviews__slide:nth-child(4n+3) { color: #FCFAF9; background: #3F4D56; } .reviews__slide:nth-child(4n+3) .reviews__text { margin: 8.625rem 0; } @media (max-width: 650px) { .reviews__slide:nth-child(4n+3) .reviews__text { margin: 4rem 0; } } .reviews__slide:nth-child(4n+4) { color: #FCFAF9; background: #D76447; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 435 462' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m98.74 0h233.36c2.65 0 5.2 1.06 7.07 2.93 35.78 35.75 57.1 57.05 92.88 92.8 1.88 1.88 2.94 4.43 2.94 7.08v349.19c0 5.52-4.48 10-10 10h-414.99c-5.52 0-10-4.48-10-10v-349.19c0-2.65 1.06-5.21 2.94-7.08 36.75-36.71 58.24-58.18 95.81-95.73z'/%3E%3C/svg%3E") center center/cover; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 435 462' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m98.74 0h233.36c2.65 0 5.2 1.06 7.07 2.93 35.78 35.75 57.1 57.05 92.88 92.8 1.88 1.88 2.94 4.43 2.94 7.08v349.19c0 5.52-4.48 10-10 10h-414.99c-5.52 0-10-4.48-10-10v-349.19c0-2.65 1.06-5.21 2.94-7.08 36.75-36.71 58.24-58.18 95.81-95.73z'/%3E%3C/svg%3E") center center/cover; } .reviews__slide:nth-child(4n+4) .reviews__text { margin: 6.25rem 0; } @media (max-width: 650px) { .reviews__slide:nth-child(4n+4) .reviews__text { margin: 4rem 0; } } .reviews__rating { display: flex; justify-content: center; gap: 0.5rem; } @media (max-width: 650px) { .reviews__rating { gap: 0.125rem; } } .reviews__rating svg { width: 1.5rem; } @media (max-width: 650px) { .reviews__rating svg { width: 1.125rem; } } .reviews__text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; margin: 9.5rem 0 5.25rem; font-size: 1.25rem; } @media (max-width: 650px) { .reviews__text { font-size: 1.125rem; margin: 4rem 0 4rem; } } .reviews__author { font-size: 0.875rem; } .reviews__controls { display: flex; align-items: center; justify-content: center; max-width: 62.5rem; margin: 4rem auto 0; gap: 4rem; } @media (max-width: 650px) { .reviews__controls { gap: 2rem; } } .reviews__controls div.swiper-scrollbar.swiper-scrollbar-horizontal { top: 0; margin: 0; } .roles { color: #00381C; padding: 3.75rem 0; } @media (max-width: 650px) { .roles { padding: 2.5rem 0; } } .roles__tagline { display: block; margin: 0 0 2rem; } @media (max-width: 650px) { .roles__tagline { margin: 0 0 1.5rem; } } .roles__entry { color: #FCFAF9; background: #00381C; margin: 0 0 0.75rem; border-radius: 1.25rem; } @media (max-width: 650px) { .roles__entry { border-radius: 0.625rem; } } .roles__bar { position: relative; padding: 1.5rem 2.375rem; cursor: pointer; } @media (max-width: 650px) { .roles__bar { padding: 1.5rem; } } .roles__title { grid-column: 1/span 4; } @media (max-width: 1024px) { .roles__title { margin: 0 0 0.5rem; grid-column: 1/span 8; } } @media (max-width: 650px) { .roles__title { padding: 0 3.125rem 0 0; grid-column: 1/-1; } } .roles__experience { padding: 0.875rem 0 0; grid-column: 5/span 4; } @media (max-width: 1024px) { .roles__experience { grid-column: 1/span 4; } } @media (max-width: 650px) { .roles__experience { grid-column: span 3; } } .roles__location { padding: 0.875rem 0 0; grid-column: 9/span 3; } @media (max-width: 1024px) { .roles__location { grid-column: 6/span 3; } } @media (max-width: 650px) { .roles__location { grid-column: span 3; } } .roles__icon { position: absolute; top: 2rem; right: 2.25rem; width: 2.25rem; height: 2.25rem; background: #A8D3E6; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 650px) { .roles__icon { top: 1.25rem; right: 1.5rem; } } .expanded .roles__icon { transform: rotate(45deg); } .roles__icon:after { content: ""; width: 0.875rem; height: 0.875rem; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.98182 12V0H7.01818V12H4.98182ZM0 7.01818V4.98182H12V7.01818H0Z' fill='%2300381C'/%3E%3C/svg%3E%0A"); position: absolute; top: 50%; left: 50%; translate: -50% -50%; } .roles__content { position: relative; padding: 1.5rem 2.375rem; } @media (max-width: 650px) { .roles__content { padding: 1.5rem; } } .roles__content:before { content: ""; position: absolute; top: 1px; left: 2.375rem; right: 2.375rem; border-top: 1px solid rgba(252, 250, 249, 0.3); } @media (max-width: 650px) { .roles__content:before { left: 1.5rem; right: 1.5rem; } } .roles__text { max-width: 64.25rem; } .roles__text p { margin: 0 0 1.5rem; } .roles__button { margin: 2rem 0 0; } .roles__button:before { background-color: #A8D3E6; } .science { color: #00381C; background: #FCFAF9; padding: 7.5rem 0; } @media (max-width: 650px) { .science { padding: 4rem 0; } } .science__inner { border: 1px solid; padding: 1.625rem; border-radius: 0.625rem; } .science__content { grid-column: 1/span 6; display: flex; align-items: start; flex-direction: column; padding: 0 6.25rem 0 0; } @media (max-width: 1024px) { .science__content { grid-column: 1/-1; margin: 0 0 4rem; } } @media (max-width: 650px) { .science__content { padding: 0; } } .science__tagline { margin: 0 0 2rem; } @media (max-width: 650px) { .science__tagline { margin: 0 0 1.5rem; } } .science__button { margin: auto 0 0; } @media (max-width: 1024px) { .science__button { margin: 2rem 0 0; } } .science__animation { width: 100%; height: auto; grid-column: 7/-1; aspect-ratio: 4/3; } @media (max-width: 1024px) { .science__animation { grid-column: 1/-1; } } .social-media-icons { position: relative; } .social-media-icons a.x { background-image: url("data:image/svg+xml,%3Csvg width='1200' height='1227' viewBox='0 0 1200 1227' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z' style='fill: %23FFFFFF;' /%3E%3C/svg%3E"); } .social-media-icons a.instagram { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z' style='fill: %23FFFFFF;' /%3E%3C/svg%3E"); } .social-media-icons a.facebook { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' width='50px' height='50px'%3E%3Cpath d='M25,3C12.85,3,3,12.85,3,25c0,11.03,8.125,20.137,18.712,21.728V30.831h-5.443v-5.783h5.443v-3.848 c0-6.371,3.104-9.168,8.399-9.168c2.536,0,3.877,0.188,4.512,0.274v5.048h-3.612c-2.248,0-3.033,2.131-3.033,4.533v3.161h6.588 l-0.894,5.783h-5.694v15.944C38.716,45.318,47,36.137,47,25C47,12.85,37.15,3,25,3z' style='fill: %23FFFFFF;' /%3E%3C/svg%3E"); } .social-media-icons a.tiktok { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.53.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z' style='fill: %23FFFFFF;' /%3E%3C/svg%3E"); } .social-media-icons .label { display: none; } .stats { color: #00381C; padding: 3.75rem 0; } .stats.border-top .container { padding-top: 5rem; border-top: 1px solid #00381C; } @media (max-width: 650px) { .stats { padding: 2.5rem 0; } } .stats__heading { grid-column: span 5; margin: 0 0 4rem; } @media (max-width: 1024px) { .stats__heading { grid-column: 1/span 9; margin: 0 0 2rem; } } @media (max-width: 650px) { .stats__heading { grid-column: 1/-1; } } .stats__text { grid-column: 7/-2; margin: 0 0 4rem; } @media (max-width: 1024px) { .stats__text { grid-column: 1/span 9; } } @media (max-width: 650px) { .stats__text { grid-column: 1/-1; } } .stats__list { display: grid; gap: 0 2.25rem; grid-template-columns: repeat(12, 1fr); grid-column: 1/-1; grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); } @media (max-width: 650px) { .stats__list { gap: 0 1.5rem; } } @media (max-width: 650px) { .stats__list { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 1024px) { .stats__list { gap: 5rem; grid-template-columns: repeat(1, 1fr); } } @media (max-width: 650px) { .stats__list { gap: 2rem; } } .stats__number { color: var(--colour); font-size: 15.5rem; font-family: "Monument Grotesk Mono", monospace; border-bottom: 1px solid #00381C; padding: 0 0 2rem; margin: 0 0 2rem; line-height: 0.9; } @media (max-width: 1024px) { .stats__number { font-size: 11.625rem; } } @media (max-width: 650px) { .stats__number { font-size: 7.5rem; } } .stats__label { padding: 0 4rem 0 0; } .stats__panel-text { grid-column: 1/-1; background: #F3AD83; padding: 3rem; margin: 4rem 0 0; border-radius: 0.375rem; } @media (max-width: 1024px) { .stats__panel-text { padding: 2rem 1.5rem; } } .stats__graph { aspect-ratio: 900/350; padding: 0 4rem 4rem 0; } @media (max-width: 650px) { .stats__graph { padding: 0; } } .text-strip { padding: 3.75rem 0; } @media (max-width: 650px) { .text-strip { padding: 2.5rem 0; } } .text-strip__bar { padding: 3rem; border-radius: 0.375rem; } @media (max-width: 1024px) { .text-strip__bar { padding: 2rem 1.5rem; } } .text-strip__heading { grid-column: span 4; padding: 0 4rem 0 0; } @media (max-width: 650px) { .text-strip__heading { padding: 0; margin: 0 0 2rem; grid-column: 1/-1; } } .text-strip__text { grid-column: 5/-1; } @media (max-width: 650px) { .text-strip__text { grid-column: 1/-1; } } .textblock { color: #00381C; padding: 3.75rem 0; } @media (max-width: 650px) { .textblock { padding: 2.5rem 0; } } .textblock__content { padding: 0 0 3.75rem; border-bottom: 1px solid rgba(0, 56, 28, 0.3); } .layout-style-2 .textblock__content { color: #3F4D56; background: #A8D3E6; text-align: center; padding: 4.5rem 0; border-radius: 0.625rem; clip-path: polygon(9.375rem 0, calc(100% - 9.375rem) 0, 100% 9.375rem, 100% 100%, 0 100%, 0 9.375rem); border: 0; } @media (max-width: 650px) { .layout-style-2 .textblock__content { padding: 4rem 0.75rem; clip-path: polygon(4rem 0, calc(100% - 4rem) 0, 100% 4rem, 100% 100%, 0 100%, 0 4rem); } } .textblock__tagline { grid-column: 1/span 7; margin: 0 0 2rem; } .layout-style-2 .textblock__tagline { grid-column: 2/-2; } @media (max-width: 650px) { .layout-style-2 .textblock__tagline { grid-column: 1/-1; } } @media (max-width: 1024px) { .textblock__tagline { grid-column: 1/-1; } } @media (max-width: 650px) { .textblock__tagline { margin: 0 0 1.5rem; } } .textblock__heading { grid-column: 1/span 7; } .layout-style-2 .textblock__heading { font-size: 2.5rem; line-height: 1.2; grid-column: 2/-2; margin: 0 0 2.5rem; } @media (max-width: 1024px) { .layout-style-2 .textblock__heading { font-size: 2.25rem; } } @media (max-width: 650px) { .layout-style-2 .textblock__heading { font-size: 1.5rem; } } @media (max-width: 650px) { .layout-style-2 .textblock__heading { grid-column: 1/-1; margin: 0 0 1.5rem; font-size: 1.375rem; } } @media (max-width: 1024px) { .textblock__heading { grid-column: 1/-1; margin: 0 0 2rem; } } .textblock__text { align-self: end; grid-column: 8/-1; } .layout-style-2 .textblock__text { font-family: "Monument Grotesk Mono", monospace; text-transform: uppercase; font-size: min(20px, 0.833vw); grid-column: 2/-2; } .layout-style-2 .textblock__text p { font-family: "Monument Grotesk Mono", monospace; } @media (max-width: 650px) { .layout-style-2 .textblock__text { font-size: 0.875rem; } } @media (max-width: 1024px) { .layout-style-2 .textblock__text { font-size: min(20px, 1.73vw); } } @media (max-width: 650px) { .layout-style-2 .textblock__text { font-size: 4.071vw; grid-column: 1/-1; } } .textblock__text p { margin: 0 0 0.75rem; } @media (max-width: 1024px) { .textblock__text { grid-column: 1/-3; } } @media (max-width: 650px) { .textblock__text { grid-column: 1/-1; } } .textimage { position: relative; padding: 7.5rem 0; } @media (max-width: 650px) { .textimage { padding: 2.5rem 0; } } .textimage.no-padding { padding: 2.25rem 0; } .textimage.no-padding:before { content: ""; position: absolute; top: 0; left: 2.25rem; right: 2.25rem; height: 1px; background: rgba(0, 56, 28, 0.3); } @media (max-width: 650px) { .textimage.no-padding:before { left: 1.5rem; right: 1.5rem; } } .textimage__content { grid-column: span 6; padding: 1.625rem; border-radius: 0.625rem; display: flex; align-items: start; flex-direction: column; } @media (max-width: 1024px) { .textimage__content { grid-column: 1/-1; aspect-ratio: auto; margin: 0 0 4rem; } } [data-layout=image-left] .textimage__content { grid-column: 7/-1; } @media (max-width: 1024px) { [data-layout=image-left] .textimage__content { grid-column: 1/-1; } } .align-centre .textimage__content { justify-content: center; } .no-padding .textimage__content { padding: 0; } .textimage__tagline { margin: 0 0 2rem; } @media (max-width: 650px) { .textimage__tagline { margin: 0 0 1.5rem; } } .textimage__heading { margin: 0 0 6.25rem; padding: 0 7.5rem 0 0; } .align-centre .textimage__heading { margin: 0 0 2rem; } @media (max-width: 1024px) { .textimage__heading { margin: 0 0 4rem; padding: 0; } } @media (max-width: 650px) { .textimage__heading { margin: 0 0 2rem; } } .textimage__text { margin: auto 0 0; max-width: 43.75rem; } .align-centre .textimage__text { margin: 0; } .textimage__text strong { font-weight: 700; } .textimage__text ul, .textimage__text ol { padding: 0 0 0 2rem; margin: 2rem 0 3rem; } .textimage__text ul ul, .textimage__text ol ol { padding: 0 0 0 1.5rem; margin: 1rem 0 1.5rem; } .textimage__text ul { list-style: disc; } .textimage__text ol { list-style: auto; } .textimage__text ol ol { list-style: lower-alpha; } .textimage__text li { font-size: max(16px, 1.375rem); margin: 0 0 0.5rem; } @media (max-width: 650px) { .textimage__text li { font-size: max(14px, 1.125rem); } } .textimage__text .image { margin: 2rem 0; } .textimage__text p:not(:last-child) { margin: 0 0 0.75rem; } .textimage__text + .textimage__button { margin: 2rem 0 0; } .textimage__button { margin: auto 0 0; } .textimage__image { grid-column: span 6; aspect-ratio: 906/910; border-radius: 0.625rem; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 906 910' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m270.12 910h625.88c5.52 0 10-4.48 10-10v-890c0-5.52-4.48-10-10-10h-625.88c-2.66 0-5.2 1.06-7.08 2.94l-260.12 260.66c-1.87 1.87-2.92 4.41-2.92 7.06v368.7c0 2.65 1.05 5.19 2.92 7.06l260.12 260.63c1.88 1.88 4.42 2.94 7.08 2.94z'/%3E%3C/svg%3E") center center/cover; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 906 910' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m270.12 910h625.88c5.52 0 10-4.48 10-10v-890c0-5.52-4.48-10-10-10h-625.88c-2.66 0-5.2 1.06-7.08 2.94l-260.12 260.66c-1.87 1.87-2.92 4.41-2.92 7.06v368.7c0 2.65 1.05 5.19 2.92 7.06l260.12 260.63c1.88 1.88 4.42 2.94 7.08 2.94z'/%3E%3C/svg%3E") center center/cover; overflow: hidden; } @media (max-width: 1024px) { .textimage__image { grid-column: 1/-1; aspect-ratio: 354/347; } } [data-layout=image-left] .textimage__image { grid-row: 1; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 906 910' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m635.88 910h-625.88c-5.52 0-10-4.48-10-10v-890c0-5.52 4.48-10 10-10h625.88c2.66 0 5.2 1.06 7.08 2.94l260.12 260.66c1.87 1.88 2.92 4.42 2.92 7.06v368.7c0 2.65-1.05 5.19-2.92 7.06l-260.12 260.63c-1.88 1.88-4.42 2.94-7.08 2.94z'/%3E%3C/svg%3E") center center/cover; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 906 910' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m635.88 910h-625.88c-5.52 0-10-4.48-10-10v-890c0-5.52 4.48-10 10-10h625.88c2.66 0 5.2 1.06 7.08 2.94l260.12 260.66c1.87 1.88 2.92 4.42 2.92 7.06v368.7c0 2.65-1.05 5.19-2.92 7.06l-260.12 260.63c-1.88 1.88-4.42 2.94-7.08 2.94z'/%3E%3C/svg%3E") center center/cover; } @media (max-width: 1024px) { [data-layout=image-left] .textimage__image { grid-row: 2; margin: 0 0 2rem; } } .title { color: #00381C; text-align: center; padding: 15rem 0; position: relative; } @media (max-width: 650px) { .title { padding: 7.5rem 0; } } .title__heading { grid-column: 4/-4; } @media (max-width: 1024px) { .title__heading { grid-column: 2/-2; } } @media (max-width: 650px) { .title__heading { grid-column: 1/-1; } } .title__text, .title__button-container { grid-column: 5/-5; } @media (max-width: 1024px) { .title__text, .title__button-container { grid-column: 2/-2; } } @media (max-width: 650px) { .title__text, .title__button-container { grid-column: 1/-1; } } .title__text { margin: 2.25rem 0 3rem; } .pin-spacer + .title { padding-top: 0; } .transition { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #F5F2EF; clip-path: polygon(25% 100%, 75% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%); pointer-events: none; z-index: 999; } .transition__animation { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 37.5rem; mix-blend-mode: darken; } @media (max-width: 1024px) { .transition__animation { width: 25rem; } } @media (max-width: 650px) { .transition__animation { width: 15.625rem; } } .trustindex { padding: 3.75rem 0; } @media (max-width: 650px) { .trustindex { padding: 2.5rem 0; } } .trustindex .ti-widget { grid-column: 2/-2; } @media (max-width: 1024px) { .trustindex .ti-widget { grid-column: 1/-1; } } .trustindex .ti-widget .ti-inner { border-radius: 0.625rem !important; } .trustindex .ti-widget * { color: #00381C !important; font-family: "Monument Grotesk", sans-serif !important; } .video-player { padding: 3.75rem 0; } @media (max-width: 650px) { .video-player { padding: 2.5rem 0; } } .video-player__holder { width: 100%; aspect-ratio: 16/9; position: relative; border-radius: 0.625rem; overflow: hidden; } @media (max-width: 650px) { .video-player__holder { aspect-ratio: 1/1; } } .video-player__holder:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; background: rgba(0, 56, 28, 0.4); transition: opacity 0.3s; } .playing .video-player__holder:after { opacity: 0; pointer-events: none; } .video-player__poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: opacity 0.3s; } .playing .video-player__poster { opacity: 0; pointer-events: none; } .video-player__play { position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: flex; align-items: center; gap: 0.75rem; color: #00381C; background: #FCFAF9; border-radius: 0.25rem; padding: 0.5rem 1rem 0.5rem 0.75rem; cursor: pointer; z-index: 2; transition: opacity 0.3s; } .playing .video-player__play { opacity: 0; pointer-events: none; } .video-player__video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (hover: hover) { .card-article:hover .card-article__heading { color: #D76447; } .card-article:hover .card-article__image-holder picture { transform: scale(1.1); } } .card-article__image-holder { display: block; aspect-ratio: 592/519; border-radius: 0.625rem; position: relative; overflow: hidden; transform: translateZ(0); } .card-article__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .card-article__meta { display: grid; gap: 0 2.25rem; grid-template-columns: repeat(4, 1fr); margin: 1.125rem 0 1.5rem; } @media (max-width: 650px) { .card-article__meta { gap: 0 1.5rem; } } @media (max-width: 650px) { .card-article__meta { grid-template-columns: repeat(2, 1fr); } } .card-article__heading { transition: color 0.3s; }