/* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } /* Prevent font size inflation */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; scroll-behavior: smooth; } * { margin: 0; outline: none; } /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul[role='list'], ol[role='list'] { list-style: none; } /* Set core body defaults */ body { min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; font-optical-sizing: auto; } /* Set shorter line heights on headings and interactive elements */ h1, h2, h3, h4, button, input, label { line-height: 1.1; } /* Balance text wrapping on headings */ h1, h2, h3, h4 { text-wrap: balance; } /* A elements that don't have a class get default styles */ a:not([class]) { -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; color: currentColor; } /* Make images easier to work with */ img, picture, video, canvas, svg { max-width: 100%; display: block; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font: inherit; } /* Make sure textareas without a rows attribute are not tiny */ textarea:not([rows]) { min-height: 10em; } /* Anything that has been anchored to should have extra scroll margin */ :target { scroll-margin-block: 5ex; } /* Avoid text overflows */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } html { scroll-behavior: smooth; } img, svg, iframe, embed { vertical-align: bottom; } address { font-style: normal; } a { color: inherit; text-underline-offset: 2px; } a:has(> i.icon), span:has(> i.icon) { display: inline-flex; align-items: center; gap: 1rem; } .site-wrapper { overflow-x: hidden; } .flickity-viewport { overflow: visible; } .logo img { width: 100%; height: auto; } :root { --brand--heading-font: "Outfit", sans-serif; --brand--body-font: "Outfit", sans-serif; --brand--primary-color: #114D88; --brand--secondary-color: #9A55BC; --brand--alice-blue: #F3F9FF; --brand--ceramic: #FBFFF2; } :root { --brand--primary-color: #383836; --brand--secondary-color: #DEDCD5; --brand--tertiary-color: #951B81; --brand--orange: #EA5E26; --brand--yellow: #F9B233; --brand--body-bg-color: var(--brand--secondary-color); --brand--body-text-color: var(--brand--primary-color); --brand--heading-font: "brockmann", sans-serif; --brand--body-font: "brockmann", sans-serif; --brand--body-line-height: 1.7; --brand--body-line-height: 1.4; } /* Fonts */ .bw { top: auto !important; bottom: 1rem; color: white; } /* breakpoints */ /* breakpoints */ body { background-color: var(--brand--body-bg-color); line-height: var(--brand--body-line-height); color: var(--brand--body-text-color); font-family: var(--brand--body-font); } /* breakpoints */ .btn { height: 55px; border-color: black; border: none; background-color: black; color: white; display: inline-flex; align-items: center; padding-left: 0.9rem; padding-right: 0.9rem; text-decoration: none; } @media (min-width: 576px) { .btn { padding-left: 1.2rem; padding-right: 1.2rem; } } .btn span, .btn i { z-index: 1; position: relative; } .btn .loading-dots { visibility: hidden; } .btn .loading-dots i { display: inline-block; content: ''; position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; background-color: var(--brand--primary-color); border-radius: 50%; transform: translate(-50%, -50%); animation: loadingDots 1.2s ease-in; animation-iteration-count: 999; animation-direction: normal; animation-fill-mode: forwards; transform: translate(-50%, -50%) scale(0.5); opacity: 0.4; } .btn .loading-dots i:nth-child(1) { left: calc( 50% - 1.3em); } .btn .loading-dots i:nth-child(2) { animation-delay: 80ms; } .btn .loading-dots i:nth-child(3) { left: calc( 50% + 1.3em); animation-delay: 160ms; } .btn.loading { pointer-events: none; background-color: white; } .btn.loading:before { background-color: transparent; } .btn.loading span { visibility: hidden; } .btn.loading .loading-dots { visibility: visible; } @keyframes loadingDots { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.4; } 20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 60% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.4; } 100% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.4; } } .entry-content a.btn, a.btn { text-decoration: none; } .entry-content a.btn:hover, a.btn:hover { opacity: 0.8; } .fade-carousel img { opacity: 0; transform: scale(1.1); transition: none; will-change: opacity, transform; z-index: 0; position: absolute; top: 0; left: 0; } .fade-carousel img.animate-in { z-index: 1; animation: animateIn 1250ms ease; animation-fill-mode: forwards; } .fade-carousel img.active { opacity: 1; animation: none; } .fade-carousel img.zoom { transform: scale(1); transition: transform 15s linear; } @keyframes animateIn { 0% { opacity: 0; } 100% { opacity: 1; } } .gform_wrapper form, .gform_body, .gform_fields { display: flex; flex-direction: column; gap: 1rem; } .gform_fields { flex-direction: row; } .gfield_label { font-weight: bold; display: block; margin-bottom: 1rem; } .gfield_validation_message { color: red; margin-top: 0.5rem; } .hidden_label .gfield_label, .hide_summary, .gform_hidden, .gfield--type-honeypot { display: none; } .gform_fileupload_rules { margin-top: 0.5rem; display: block; } .gfield_required_asterisk { color: red; margin-left: 0.5rem; } fieldset.gfield { margin: 0; padding: 0; border: none; } select, input[type=text], input[type=email], input[type=tel], textarea { height: 55px; background-color: #fff; border: 1px solid black; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-left: 1rem; padding-right: 1rem; font-size: 1.1rem; font-weight: normal; font-family: var(--brand--body-font); width: 100%; } select::-moz-placeholder, input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, textarea::-moz-placeholder { font-weight: normal; color: black; opacity: 0.5; font-size: 1.1rem; } select::placeholder, input[type=text]::placeholder, input[type=email]::placeholder, input[type=tel]::placeholder, textarea::placeholder { font-weight: normal; color: black; opacity: 0.5; font-size: 1.1rem; } textarea { height: auto; width: 100%; padding-top: 1rem; padding-bottom: 1rem; } select, .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='16'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='none' d='M-2-1h26v16H-2z' data-name='Rectangle 51'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)' data-name='Group 35' transform='translate(2 1)'%3E%3Cpath d='M11.2 14a1.4 1.4 0 0 1-1-.5L.2 2.3A1.4 1.4 0 0 1 2.5.5l8.7 10 8.7-10a1.4 1.4 0 1 1 2.2 1.8l-9.8 11.2a1.4 1.4 0 0 1-1.1.5Z' data-name='Path 136'/%3E%3C/g%3E%3C/svg%3E "); background-size: 26px 16px; background-position: right 0.8rem center; background-repeat: no-repeat; } .select { cursor: pointer; } .select:hover { opacity: 0.5; } button { cursor: pointer; } .gpfup__droparea > div { padding-top: 2rem; padding-bottom: 2rem; } .gpfup__droparea > div:before { content: ''; display: block; width: 73px; height: auto; aspect-ratio: 73 / 66; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='73.67' height='66.34'%3E%3Cg fill='%239a55bc'%3E%3Cpath data-name='Path 317' d='M64.4 23.16v-.72A23.02 23.02 0 0 0 40.97 0 23.49 23.49 0 0 0 19.44 13.7 21.85 21.85 0 0 0 0 35.27a21.58 21.58 0 0 0 21.65 21.54h8.41v-4.48h-8.41a17.16 17.16 0 0 1-.56-34.24h1.5l.51-1.41A18.91 18.91 0 0 1 41.05 4.56 18.53 18.53 0 0 1 60.02 22.5a17.39 17.39 0 0 1 0 1.8l-.18 1.6 1.46.68a13.46 13.46 0 0 1-5.7 25.74H43.52v4.48H55.6a17.95 17.95 0 0 0 8.82-33.65Z'/%3E%3Cpath data-name='Path 318' d='M46.4 43.01a2.24 2.24 0 0 0 1.6-3.83L36.8 27.96 25.57 39.17a2.24 2.24 0 0 0 3.16 3.17l5.8-5.72V64.1a2.24 2.24 0 1 0 4.5 0V36.62l5.76 5.76a2.24 2.24 0 0 0 1.6.63Z'/%3E%3C/g%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; margin-left: auto; margin-right: auto; margin-bottom: 1rem; } .gf-options-inline .gfield_radio { display: flex; gap: 1rem; } .hamburger { display: block; background: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; border: none; width: 36px; height: 24px; padding: 0; will-change: opacity; transition: opacity 250ms ease; } .hamburger:hover { cursor: pointer; } .hamburger i { position: absolute; top: 50%; left: 50%; width: 36px; height: 24px; transform: translate(-50%, -50%); } .hamburger i span { display: block; height: 2px; width: 100%; position: absolute; background-color: white; will-change: transform, opacity, background-color; border-radius: 3px; transition: all 250ms ease; transform-origin: 50%; } .hamburger.is-active i span:nth-child(1) { transform: rotate(-45deg) translate(-22.5%, 150%); } .hamburger.is-active i span:nth-child(2) { opacity: 0; } .hamburger.is-active i span:nth-child(3) { transform: rotate(45deg) translate(-22.5%, -150%); } .hamburger:hover i span { opacity: 0.8; } .wrapper { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; position: relative; } .wrapper.wide { max-width: 1920px; } .wrapper.fluid { max-width: 1400px !important; } @media (min-width: 1056px) { .wrapper { max-width: 992px; } } @media (min-width: 1264px) { .wrapper { max-width: 1200px; } } @media (min-width: 1464px) { .wrapper { max-width: 1400px; } } .section { margin-top: 3rem; margin-bottom: 3rem; } @media (min-width: 992px) { .section { margin-top: 6rem; margin-bottom: 6rem; } } .section--inner { margin: 0; padding-top: 3rem; padding-bottom: 3rem; } @media (min-width: 992px) { .section--inner { padding-top: 5rem; padding-bottom: 5rem; } } .gutter { padding-left: 1.25rem; padding-right: 1.25rem; } @media (min-width: 768px) { .gutter { padding-left: 1.75rem; padding-right: 1.75rem; } } @media (min-width: 992px) { .gutter { padding-left: 2rem; padding-right: 2rem; } } /* ====== Zoom effect ====== */ .mfp-zoom-in { /* start state */ /* animate in */ /* animate out */ } .mfp-zoom-in .mfp-with-anim { opacity: 0; transition: all 0.2s ease-in-out; transform: scale(0.8); } .mfp-zoom-in.mfp-bg { opacity: 0; transition: all 0.3s ease-out; } .mfp-zoom-in.mfp-ready .mfp-with-anim { opacity: 1; transform: scale(1); } .mfp-zoom-in.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-zoom-in.mfp-removing .mfp-with-anim { transform: scale(0.8); opacity: 0; } .mfp-zoom-in.mfp-removing.mfp-bg { opacity: 0; } /* ====== Newspaper effect ====== */ .mfp-newspaper { /* start state */ /* animate in */ /* animate out */ } .mfp-newspaper .mfp-with-anim { opacity: 0; transition: all 0.5s; transform: scale(0) rotate(500deg); } .mfp-newspaper.mfp-bg { opacity: 0; transition: all 0.5s; } .mfp-newspaper.mfp-ready .mfp-with-anim { opacity: 1; transform: scale(1) rotate(0deg); } .mfp-newspaper.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-newspaper.mfp-removing .mfp-with-anim { transform: scale(0) rotate(500deg); opacity: 0; } .mfp-newspaper.mfp-removing.mfp-bg { opacity: 0; } /* ====== Move-horizontal effect ====== */ .mfp-move-horizontal { /* start state */ /* animate in */ /* animate out */ } .mfp-move-horizontal .mfp-with-anim { opacity: 0; transition: all 0.3s; transform: translateX(-50px); } .mfp-move-horizontal.mfp-bg { opacity: 0; transition: all 0.3s; } .mfp-move-horizontal.mfp-ready .mfp-with-anim { opacity: 1; transform: translateX(0); } .mfp-move-horizontal.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-move-horizontal.mfp-removing .mfp-with-anim { transform: translateX(50px); opacity: 0; } .mfp-move-horizontal.mfp-removing.mfp-bg { opacity: 0; } /* ====== Move-from-top effect ====== */ .mfp-move-from-top { /* start state */ /* animate in */ /* animate out */ } .mfp-move-from-top .mfp-content { vertical-align: top; } .mfp-move-from-top .mfp-with-anim { opacity: 0; transition: all 0.2s; transform: translateY(-100px); } .mfp-move-from-top.mfp-bg { opacity: 0; transition: all 0.2s; } .mfp-move-from-top.mfp-ready .mfp-with-anim { opacity: 1; transform: translateY(0); } .mfp-move-from-top.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-move-from-top.mfp-removing .mfp-with-anim { transform: translateY(-50px); opacity: 0; } .mfp-move-from-top.mfp-removing.mfp-bg { opacity: 0; } /* ====== 3d unfold ====== */ .mfp-3d-unfold { /* start state */ /* animate in */ /* animate out */ } .mfp-3d-unfold .mfp-content { perspective: 2000px; } .mfp-3d-unfold .mfp-with-anim { opacity: 0; transition: all 0.3s ease-in-out; transform-style: preserve-3d; transform: rotateY(-60deg); } .mfp-3d-unfold.mfp-bg { opacity: 0; transition: all 0.5s; } .mfp-3d-unfold.mfp-ready .mfp-with-anim { opacity: 1; transform: rotateY(0deg); } .mfp-3d-unfold.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-3d-unfold.mfp-removing .mfp-with-anim { transform: rotateY(60deg); opacity: 0; } .mfp-3d-unfold.mfp-removing.mfp-bg { opacity: 0; } /* ====== Zoom-out effect ====== */ .mfp-zoom-out { /* start state */ /* animate in */ /* animate out */ } .mfp-zoom-out .mfp-with-anim { opacity: 0; transition: all 0.3s ease-in-out; transform: scale(1.3); } .mfp-zoom-out.mfp-bg { opacity: 0; transition: all 0.3s ease-out; } .mfp-zoom-out.mfp-ready .mfp-with-anim { opacity: 1; transform: scale(1); } .mfp-zoom-out.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-zoom-out.mfp-removing .mfp-with-anim { transform: scale(1.3); opacity: 0; } .mfp-zoom-out.mfp-removing.mfp-bg { opacity: 0; } /* ====== "Hinge" close effect ====== */ @keyframes hinge { 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 100% { transform: translateY(700px); opacity: 0; } } .hinge { animation-duration: 1s; animation-name: hinge; } .mfp-with-fade .mfp-content, .mfp-with-fade.mfp-bg { opacity: 0; transition: opacity .5s ease-out; } .mfp-with-fade.mfp-ready .mfp-content { opacity: 1; } .mfp-with-fade.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-with-fade.mfp-removing.mfp-bg { opacity: 0; } .popup { max-width: 710px; margin-left: auto; margin-right: auto; background-color: white; } .mfp-bg, .mfp-wrap { z-index: 99999 !important; } .mobile-navigation { background-color: white; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 950ms cubic-bezier(0.165, 0.84, 0.44, 1); left: auto; right: 0; max-width: 480px; width: 100%; align-items: flex-start; color: var(--brand--body-text-color); padding: 2rem; } .mobile-navigation.is-visible { transform: translateX(0); } .mobile-navigation .wrapper { height: 100%; display: flex; flex-direction: column; } .mobile-navigation__header { height: 140px; display: flex; } .mobile-navigation__main ul { display: flex; flex-direction: column; gap: 0.9rem; } .mobile-navigation__footer { padding-top: 2rem; padding-bottom: 2rem; margin-top: auto; font-weight: bold; } .mobile-navigation__footer a { color: var(--brand--primary-color); } .mobile-navigation__footer a:nth-child(n+2) { position: relative; } .mobile-navigation__footer a:nth-child(n+2):before { content: ''; display: block; width: 1px; background-color: var(--brand--primary-color); height: 1rem; position: absolute; top: 50%; left: -0.5rem; transform: translateY(-50%); } .mobile-navigation__close { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; aspect-ratio: 1; width: auto; height: 22px; border: none; padding: 0; } .mobile-navigation__main ul { align-items: flex-start; } .mobile-navigation .logo path { fill: var(--brand--primary-color); } .mobile-navigation .hamburger i span { background-color: var(--brand--primary-color); } .mobile-navigation__header { width: 100%; height: 90px; } .mobile-navigation__main { flex: 1; align-items: flex-start; width: 100%; } .mobile-navigation .sub-menu .sub-menu a { font-weight: normal; } .mobile-navigation .sub-menu { gap: 0.7rem; padding-top: 0.9rem; } .mobile-navigation .sub-menu { display: block; padding-left: 0; font-size: 2rem; list-style: none; } .mobile-navigation .sub-menu li { font-size: 1.4rem; font-weight: 500; font-family: var(--brand--body-font); } .mobile-navigation .sub-menu li a { display: flex; flex-direction: row; gap: 1rem; align-items: center; } .mobile-navigation .sub-menu li a img { aspect-ratio: 3/2; aspect-ratio: 4/3; height: auto; width: 125px; } .mobile-navigation .nav-menu { width: 100%; } .mobile-navigation .nav-menu > li { align-self: stretch; } .mobile-navigation li.menu-item-has-children { position: relative; } .mobile-navigation li.menu-item-has-children:before { content: ''; /* background-color: red; */ background-image: linear-gradient(to bottom, white 0, white 10px, var(--brand--primary-color) 10px, var(--brand--primary-color) 13px, white 13px, white); background-position: center; width: 0; display: inline-block; height: 22px; transition: all 250ms ease; will-change: width; } .mobile-navigation li.menu-item-has-children > button { right: 0; position: absolute; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background: none; top: 0; transform: none; width: 3.5rem; height: 2.5rem; } .mobile-navigation li.menu-item-has-children > button:after { content: ''; background-color: var(--brand--primary-color); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.15' height='7.99'%3E%3Cg fill='%239a55bc'%3E%3Cpath d='M6.62 7.49A.86.86 0 0 1 6 7.23L.76 2a.76.76 0 0 1-.18-.27l-.02-.05-.01-.03v-.02l-.02-.05-.02-.05v-.11L.5 1.4v-.03c0-.23.09-.45.26-.61A.86.86 0 0 1 1.37.5c.24 0 .45.09.62.26l4.63 4.62L11.16.83a.86.86 0 0 1 .62-.25c.24 0 .45.09.62.25.17.17.25.38.25.62s-.08.45-.25.62L7.23 7.23a.86.86 0 0 1-.61.26Z'/%3E%3Cpath d='M1.37 1c-.1 0-.19.04-.26.11a.36.36 0 0 0-.11.26v.06l.02.06.02.05.03.06.04.05 5.24 5.23c.08.07.16.11.27.11.1 0 .19-.04.26-.11l5.16-5.16a.36.36 0 0 0 .11-.27.36.36 0 0 0-.37-.37c-.1 0-.2.03-.26.1l-4.9 4.9-4.98-4.97A.36.36 0 0 0 1.37 1m0-1c.37 0 .72.14.98.4l4.27 4.27L10.8.48a1.36 1.36 0 0 1 1.94 0 1.36 1.36 0 0 1 0 1.94L7.6 7.6a1.36 1.36 0 0 1-1.95 0L.4 2.36a1.26 1.26 0 0 1-.29-.45l-.03-.09-.06-.2-.02-.2v-.05A1.36 1.36 0 0 1 1.37 0Z'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.15' height='7.99'%3E%3Cg fill='%239a55bc'%3E%3Cpath d='M6.62 7.49A.86.86 0 0 1 6 7.23L.76 2a.76.76 0 0 1-.18-.27l-.02-.05-.01-.03v-.02l-.02-.05-.02-.05v-.11L.5 1.4v-.03c0-.23.09-.45.26-.61A.86.86 0 0 1 1.37.5c.24 0 .45.09.62.26l4.63 4.62L11.16.83a.86.86 0 0 1 .62-.25c.24 0 .45.09.62.25.17.17.25.38.25.62s-.08.45-.25.62L7.23 7.23a.86.86 0 0 1-.61.26Z'/%3E%3Cpath d='M1.37 1c-.1 0-.19.04-.26.11a.36.36 0 0 0-.11.26v.06l.02.06.02.05.03.06.04.05 5.24 5.23c.08.07.16.11.27.11.1 0 .19-.04.26-.11l5.16-5.16a.36.36 0 0 0 .11-.27.36.36 0 0 0-.37-.37c-.1 0-.2.03-.26.1l-4.9 4.9-4.98-4.97A.36.36 0 0 0 1.37 1m0-1c.37 0 .72.14.98.4l4.27 4.27L10.8.48a1.36 1.36 0 0 1 1.94 0 1.36 1.36 0 0 1 0 1.94L7.6 7.6a1.36 1.36 0 0 1-1.95 0L.4 2.36a1.26 1.26 0 0 1-.29-.45l-.03-.09-.06-.2-.02-.2v-.05A1.36 1.36 0 0 1 1.37 0Z'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; width: 20px; height: auto; aspect-ratio: 13 / 8; display: block; position: absolute; top: 1rem; right: 0; transform: rotate(-90deg); transition: transform 250ms ease; } .mobile-navigation li.menu-item-has-children.is-active:before { content: ''; width: 50px; padding-right: 1rem; border-right: 5px solid white; height: 22px; } .mobile-navigation li.menu-item-has-children.is-active > button:after { transform: rotate(0); } /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } /* Prevent font size inflation */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; scroll-behavior: smooth; } * { margin: 0; outline: none; } /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul[role='list'], ol[role='list'] { list-style: none; } /* Set core body defaults */ body { min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; font-optical-sizing: auto; } /* Set shorter line heights on headings and interactive elements */ h1, h2, h3, h4, button, input, label { line-height: 1.1; } /* Balance text wrapping on headings */ h1, h2, h3, h4 { text-wrap: balance; } /* A elements that don't have a class get default styles */ a:not([class]) { -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; color: currentColor; } /* Make images easier to work with */ img, picture, video, canvas, svg { max-width: 100%; display: block; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font: inherit; } /* Make sure textareas without a rows attribute are not tiny */ textarea:not([rows]) { min-height: 10em; } /* Anything that has been anchored to should have extra scroll margin */ :target { scroll-margin-block: 5ex; } /* Avoid text overflows */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } html { scroll-behavior: smooth; } img, svg, iframe, embed { vertical-align: bottom; } address { font-style: normal; } a { color: inherit; text-underline-offset: 2px; } a:has(> i.icon), span:has(> i.icon) { display: inline-flex; align-items: center; gap: 1rem; } .site-wrapper { overflow-x: hidden; } .flickity-viewport { overflow: visible; } .logo img { width: 100%; height: auto; } .stagger .stagger--in { opacity: 0; transition: opacity 0.75s ease; } .stagger .stagger--in.animate-in { opacity: 1; transition-delay: 125ms; } body { font-family: var(--brand--body-font); } a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-weight: 500; } h1, h2, h3, h4, h5, h6, [class*="__heading"], [class*="-heading"] { line-height: 1.3; } .entry-content { font-size: 1.3rem; font-weight: 200; line-height: 1.7; } .entry-content ol, .entry-content ul:not(.list--contact-links):not(.list--social-links) { display: flex; gap: 0.5rem; flex-direction: column; list-style-type: decimal; padding-left: 1rem; margin-left: 1rem; } .entry-content ol ol { list-style-type: lower-alpha; } .entry-content ul:not(.list--contact-links):not(.list--social-links) { list-style-type: disc; } .entry-content li::marker { font-weight: 400; } .entry-content > *:not(:last-child):not(blockquote), .entry-content > blockquote > *:not(:last-child) { margin-bottom: 1.2rem; } .entry-content strong { font-weight: bold; } .entry-content a { text-decoration: underline; } .entry-content a:hover { text-decoration: none; } .entry-content ul.list { list-style: none; padding: 0; margin: 0; } .nav-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; } .d-flex { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .fd-c { flex-direction: column; align-items: flex-start; } .ai-fs { align-items: flex-start; } .ai-fe { align-items: flex-end; } .ai-c { align-items: center; } .jc-fs { justify-content: flex-start; } .fg { position: relative; z-index: 9; } .hide, .d-none { display: none; } .zoom-hover { transition: transform 550ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 550ms cubic-bezier(0.215, 0.61, 0.355, 1); will-change: transform, opacity; } .zoom-hover [class*=-image] { overflow: hidden; } .zoom-hover [class*=-image] img { transition: transform 550ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 550ms cubic-bezier(0.215, 0.61, 0.355, 1); will-change: transform, opacity; } .zoom-hover:hover [class*=-image] img { transform: scale(1.1); } .arrow-link i, .arrow-link span { transition: transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1); will-change: transform, opacity; } .arrow-link:hover i, .arrow-link:hover span { transform: translateX(0.8rem); } body.resizing .zoom-hover { transition: none; } .l-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .l-clamp--2 { -webkit-line-clamp: 2; } .l-clamp--3 { -webkit-line-clamp: 3; } .pos-a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .img--cover, .img-cover, .img-fit { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .text-center { text-align: center; } .list--reset { list-style: none; margin: 0; padding: 0; } .list--reset li { margin: 0; padding: 0; } .list--contact-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .list--contact-links li { margin: 0; padding: 0; } .list--contact-links li a { gap: 0.5rem; text-decoration: none; } .list--social-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row; gap: 0.5rem; } .list--social-links li { margin: 0; padding: 0; } .list--social-links li a { gap: 0.5rem; } .list--social-links li a[href=""] { display: none; } .image-transition { clip-path: inset(100% 0 0 0); transition: clip-path 0.5s ease, opacity 0.5s ease; transition-delay: 0.1s; opacity: 1; } .image-transition:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; transition: transform 0.5s ease; transition-delay: 1s; transform: scaleY(1); transform-origin: 50% 0; } .image-transition.animate-in { clip-path: inset(0 0 0 0); opacity: 1; } .image-transition.animate-in:after { transform: scaleY(0); } :root { --brand--heading-font: "Outfit", sans-serif; --brand--body-font: "Outfit", sans-serif; --brand--primary-color: #114D88; --brand--secondary-color: #9A55BC; --brand--alice-blue: #F3F9FF; --brand--ceramic: #FBFFF2; } .basic-text__heading { margin-bottom: 2rem; } .basic-text__heading h2 { font-weight: 400; line-height: 1.2; } @media (max-width: 767px) { .basic-text__heading h2.heading--section { font-size: 1.9rem; } } .basic-text__heading h2 em { font-weight: 600; font-style: normal; } @media (min-width: 576px) { .basic-text--style-b .wrapper { padding-left: 4rem; padding-right: 4rem; } } @media (min-width: 992px) { .basic-text--style-b .wrapper { padding-left: 8rem; padding-right: 8rem; } } @media (min-width: 768px) { .site-main:has(.basic-text + .the-drawing-room-process) .basic-text.section { margin-bottom: 7rem; } } /* breakpoints */ .btn { border-radius: 10px; transition: background-color 125ms cubic-bezier(0.215, 0.61, 0.355, 1); } .btn--primary { color: var(--brand--tertiary-color); background-color: color-mix(in oklab, white, transparent 75%); } .btn--secondary { color: var(--brand--tertiary-color); background-color: color-mix(in oklab, white, transparent 75%); font-size: 1.4rem; width: 100%; justify-content: center; } @media (min-width: 576px) { .btn--secondary { width: 320px; } } .btn--secondary:hover { background-color: var(--brand--tertiary-color); color: white; } .career__main { gap: 2rem; flex-direction: column; position: relative; padding-top: 3rem; } @media (min-width: 768px) { .career__main { padding-top: 6rem; flex-direction: row; } } .career__main:before { content: ''; position: absolute; display: block; left: 50%; width: 100vw; transform: translateX(-50%); height: 15px; background-color: var(--brand--tertiary-color); top: 0; } .career__text, .career__form { width: 100%; } @media (min-width: 768px) { .career__text, .career__form { width: calc( 50% - 2rem * 1 /2); } } .career__form { position: relative; padding: 2rem 0; background-color: #EEECE5; } @media (min-width: 768px) { .career__form { padding: 2rem; } } .career__form .gform_fields { flex-wrap: wrap; } .career__form .gfield--width-half { width: 100%; } @media (min-width: 768px) { .career__form .gfield--width-half { width: calc( 50% - 1rem * 0.5); } } .career__form .gfield--width-third { width: 100%; } @media (min-width: 768px) { .career__form .gfield--width-third { width: calc( 33.333% - 1rem * 0.666); } } .career__form .gfield--width-full { width: 100%; } .career__form .gfield--type-consent .gfield_label { display: none; } .career__form .gform_heading, .career__form .gfield_visibility_hidden { display: none; } .career__form .gform_drop_area { background-color: white; padding: 2rem; text-align: center; border-radius: 5px; } .career__form .gform_drop_area svg { width: 3rem; } .career__form .gform_drop_instructions, .career__form .gform_button_select_files { font-size: 1.1rem; font-weight: 500; } .career__form .gform_button_select_files { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline; margin: 0; padding: 0; border: none; background: none; color: var(--brand--tertiary-color); } .career__form select, .career__form input[type=text], .career__form input[type=email], .career__form input[type=tel], .career__form textarea { border-color: #B5C6D2; } .career__form select, .career__form input[type=text], .career__form input[type=email], .career__form input[type=tel], .career__form textarea { border-color: #EEECE5; border-radius: 5px; } .career__form:before { content: ''; display: block; position: absolute; top: 0; left: 50%; width: 100vw; height: 100%; background-color: #EEECE5; z-index: -1; transform: translateX(-50%); } @media (min-width: 768px) { .career__form:before { content: ''; display: block; position: absolute; top: auto; bottom: 100%; left: 0; width: 100%; height: 7rem; background-color: #EEECE5; z-index: 1; transform: none; } } .career__form .btn--secondary { width: 100%; } .career__form .gfield_required_text { color: red; } .career__back { margin-top: 3rem; margin-bottom: 3rem; font-size: 1.3rem; } .career__back a { color: var(--brand--tertiary-color); } .career__back a i { background-color: var(--brand--tertiary-color); } .career__back a:hover i { transform: translateX(-1rem); } .bw { display: none !important; } .careers-intro { --gap: 2rem; } @media (min-width: 992px) { .careers-intro { --gap: 4rem; } } .careers-intro .wrapper { gap: var(--gap); flex-direction: column; } @media (min-width: 992px) { .careers-intro .wrapper { flex-direction: row; } } .careers-intro__text, .careers-intro__image { width: 100%; } @media (min-width: 992px) { .careers-intro__text, .careers-intro__image { width: calc( 50% - var(--gap) * 1 / 2); } } @media (min-width: 992px) { .careers-intro__image { align-self: stretch; } } .careers-intro__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; aspect-ratio: 4 / 3; } @media (min-width: 992px) { .careers-intro__image img { aspect-ratio: 1; } } .careers-list { --gap: 4rem; } .careers-list .wrapper { gap: var(--gap); flex-direction: column; } @media (min-width: 992px) { .careers-list .wrapper { flex-direction: row; } } .careers-list__text, .careers-list__images { width: 100%; } @media (min-width: 992px) { .careers-list__text, .careers-list__images { width: calc( 50% - var(--gap) * 1 / 2); } } .careers-list__images img { aspect-ratio: 410 / 640; width: calc( 50% - 0.5rem); height: auto; -o-object-fit: cover; object-fit: cover; } @media (min-width: 576px) { .careers-list__images img { width: calc( 50% - 1rem); } } .careers-list__images img:nth-child(2) { transform: translateY(3rem); } .careers-list__items ul { display: flex; flex-direction: column; } .careers-list__items ul li { display: flex; height: 5rem; border-bottom: 1px solid white; align-items: center; font-size: 1.3rem; } .careers-list__items ul li a { display: flex; justify-content: space-between; align-items: center; height: 5rem; width: 100%; color: var(--brand--tertiary-color); } .careers-list__items ul li a i, .careers-list__items ul li a span { width: 36px; flex: none; background-color: var(--brand--tertiary-color); } .careers-list__items ul li a span { /*display: none;*/ width: 18px; aspect-ratio: 1 / 1; } .careers-list__items ul li a:hover { color: white; } .careers-list__items ul li a:hover i, .careers-list__items ul li a:hover span { background-color: white; } .contact { position: relative; } .contact:before { content: ''; display: block; background-color: #161B4B; width: 1920px; width: 100vw; height: 20px; top: 50%; left: 50%; position: absolute; z-index: -1; transform: translate(-50%, -50%); } .contact .wrapper { gap: 2rem; flex-direction: column; } @media (min-width: 992px) { .contact .wrapper { flex-direction: row; align-items: center; } } .contact__text { position: relative; gap: 2.5rem; } @media (min-width: 992px) { .contact__text { width: calc( 40% - 1rem); width: 440px; } } .contact__text a:hover { opacity: 0.7; } .contact__text:before { content: ''; display: block; background-color: var(--brand--body-bg-color); width: calc( 100% + 8rem); height: 100%; top: 0; left: 50%; position: absolute; z-index: -1; transform: translateX(-50%); } .contact__map { aspect-ratio: 1; align-self: stretch; } @media (min-width: 768px) { .contact__map { aspect-ratio: 760 / 555; } } @media (min-width: 992px) { .contact__map { width: calc( 60% - 1rem); } } .contact__map > * { width: 100%; height: 100%; } .contact address { font-size: 1.4rem; line-height: 1.3; } .contact .w3w { font-size: 1.4rem; line-height: 1.3; } .contact .w3w a:hover { opacity: 1; color: var(--brand--orange); } .contact .list--social-links { margin: 0; list-style: none; } .contact .list--social-links li a:hover { opacity: 1; } .contact .list--social-links li:nth-child(1) a:hover i { background-color: var(--brand--tertiary-color); } .contact .list--social-links li:nth-child(2) a:hover i { background-color: var(--brand--yellow); } .contact .list--social-links li:nth-child(3) a:hover i { background-color: var(--brand--orange); } .contact .list--contact-links { font-size: 1.6rem; gap: 0.5rem; line-height: 1.3; font-weight: 500; } @media (min-width: 768px) { .contact .list--contact-links { font-size: 2.1rem; } } .contact .list--contact-links i { display: none; } .contact .list--contact-links a:hover { opacity: 1; color: var(--brand--orange); } .contact-form__form { max-width: 1260px; margin-left: auto; margin-right: auto; } .contact-form .gform_fields { flex-wrap: wrap; } .contact-form .gfield--width-half { width: 100%; } @media (min-width: 768px) { .contact-form .gfield--width-half { width: calc( 50% - 1rem * 0.5); } } .contact-form .gfield--width-third { width: 100%; } @media (min-width: 768px) { .contact-form .gfield--width-third { width: calc( 33.333% - 1rem * 0.666); } } .contact-form .gfield--width-full { width: 100%; } .contact-form .gfield--type-consent .gfield_label { display: none; } .contact-form .gfield_label, .contact-form .gform_heading { display: none; } .contact-form select, .contact-form input[type=text], .contact-form input[type=email], .contact-form input[type=tel], .contact-form textarea { border-color: var(--brand--body-bg-color); border-radius: 5px; } .floating-navigation { position: fixed; top: 0; width: 100%; z-index: 99; transition: opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 750ms cubic-bezier(0.215, 0.61, 0.355, 1); opacity: 0; transform: translateY(-2rem); top: 60px; } @media (min-width: 1264px) { .floating-navigation { top: 75px; } } @media (min-width: 1264px) { .floating-navigation { top: 112px; } } .floating-navigation.animate-in { opacity: 0.8; opacity: 1; transform: translateY(0); } .floating-navigation .wrapper { height: 120px; height: 0; gap: 3rem; } .floating-navigation .hamburger rect { fill: white; } .footer-cta.section { margin-top: 5rem; margin-bottom: 5rem; } @media (min-width: 768px) { .footer-cta.section { margin-top: 9rem; margin-bottom: 9rem; margin-top: 7rem; margin-bottom: 7rem; } } .footer-cta .wrapper { border-radius: 10px; padding: 1.5rem 1.5rem; overflow: hidden; flex-direction: column; gap: 1.5rem; } @media (min-width: 768px) { .footer-cta .wrapper { padding: 2rem 3rem; } } @media (min-width: 992px) { .footer-cta .wrapper { gap: 3rem; flex-direction: row; } } .footer-cta .wrapper:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #787773; opacity: 0.1; } .footer-cta__heading { font-size: 1.8rem; font-weight: 500; line-height: 1.1; margin-bottom: 1rem; } @media (min-width: 768px) { .footer-cta__heading { font-size: 2.4rem; } } @media (min-width: 992px) { .footer-cta__heading { margin-bottom: 0.5rem; } } .footer-cta__text { flex: 1; } @media (max-width: 575px) { .footer-cta__button { width: 100%; } } @media (max-width: 575px) { .footer-cta .btn { width: 100%; } } .full-width-testimonial { text-align: center; } .full-width-testimonial .wrapper { max-width: calc( 920px + 9rem); } @media (min-width: 992px) { .full-width-testimonial .wrapper { max-width: calc( 920px + 21rem); } } .full-width-testimonial__quotation { position: relative; } @media (min-width: 992px) { .full-width-testimonial__quotation { padding-left: 4.5rem; padding-right: 4.5rem; } } .full-width-testimonial__quotation:before, .full-width-testimonial__quotation:after { content: ''; display: block; aspect-ratio: 48.47 / 39.07; width: 32px; height: auto; margin-top: 2rem; margin-bottom: 2rem; background-color: #383836; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } @media (min-width: 992px) { .full-width-testimonial__quotation:before, .full-width-testimonial__quotation:after { width: 48px; margin: 0; position: absolute; } } .full-width-testimonial__quotation:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48.47' height='39.07'%3E%3Cpath data-name='Path 288' d='M22.96 0H5.9L0 19.87v19.2h17.32V20.41Zm2.55 39.07h17.32V20.4L48.47 0H31.42L25.5 19.87Z' fill='%23383836'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48.47' height='39.07'%3E%3Cpath data-name='Path 288' d='M22.96 0H5.9L0 19.87v19.2h17.32V20.41Zm2.55 39.07h17.32V20.4L48.47 0H31.42L25.5 19.87Z' fill='%23383836'/%3E%3C/svg%3E"); } @media (min-width: 992px) { .full-width-testimonial__quotation:before { top: 0; left: 0; } } .full-width-testimonial__quotation:after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48.47' height='39.07'%3E%3Cpath data-name='Path 289' d='M25.5 39.07h17.06l5.9-19.87V0H31.16v18.66ZM22.97 0H5.64v18.66L0 39.06h17.05l5.9-19.86Z' fill='%23383836'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48.47' height='39.07'%3E%3Cpath data-name='Path 289' d='M25.5 39.07h17.06l5.9-19.87V0H31.16v18.66ZM22.97 0H5.64v18.66L0 39.06h17.05l5.9-19.86Z' fill='%23383836'/%3E%3C/svg%3E"); margin-left: auto; } @media (min-width: 992px) { .full-width-testimonial__quotation:after { bottom: 0; right: 0; } } .full-width-testimonial__quotation.entry-content { font-size: 1.3rem; line-height: 1.5; } @media (min-width: 992px) { .full-width-testimonial__quotation.entry-content { font-size: 1.8rem; padding-top: 1rem; padding-bottom: 1rem; } } .full-width-testimonial__source { margin-top: -3.5rem; font-size: 1rem; } @media (min-width: 992px) { .full-width-testimonial__source { margin-top: 0; } } .full-width-testimonial__source:before { content: ''; display: block; width: 1px; height: 4rem; background-color: #383836; margin-left: auto; margin-right: auto; margin-top: 2rem; margin-bottom: 1rem; } .full-width-testimonial__items .flickity-viewport { overflow: hidden; } .full-width-testimonial__items .flickity-page-dots button { background-color: white; opacity: 0.5; outline: none; box-shadow: none; } .full-width-testimonial__items .flickity-page-dots button.is-selected { opacity: 1; } .full-width-testimonial__item { padding-left: 0; padding-right: 0; } @media (min-width: 576px) { .full-width-testimonial__item { padding-left: 3rem; padding-right: 3rem; } } @media (min-width: 992px) { .full-width-testimonial__item { padding-left: 6rem; padding-right: 6rem; } } .full-width-video { background-image: linear-gradient(to bottom, #383836, #787773); color: white; } @media (max-width: 767px) { .full-width-video.gutter { padding-left: 0; padding-right: 0; } } .full-width-video.section--inner { padding-top: 0; padding-bottom: 0; } @media (min-width: 768px) { .full-width-video.section--inner { padding-top: 4rem; padding-bottom: 4rem; } } @media (min-width: 992px) { .full-width-video.section--inner { padding-top: 5rem; padding-bottom: 5rem; } } .full-width-video__video { max-width: 865px; margin-left: auto; margin-right: auto; } .hamburger rect { transition: fill 450ms cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger:hover rect { fill: white; } .hamburger:hover rect:nth-child(1) { fill: #FCA01F; } .hamburger:hover rect:nth-child(2) { fill: #7C0E6F; } .hamburger:hover rect:nth-child(3) { fill: #EA5E26; } .hero-carousel { margin-top: -120px; min-height: 480px; max-height: 1080px; aspect-ratio: 1920 / 1080; width: 100%; position: relative; } @media (min-width: 576px) { .hero-carousel { margin-top: -150px; } } @media (min-width: 1264px) { .hero-carousel { margin-top: -225px; } } .hero-carousel__caption { aspect-ratio: 380 / 130; width: 300px; height: auto; position: relative; padding: 1rem 0; margin-bottom: 2rem; margin-bottom: 0; width: 100%; aspect-ratio: unset; height: 6rem; } @media (min-width: 1200px) { .hero-carousel__caption { aspect-ratio: 420 / 130; width: 380px; margin-bottom: 3rem; margin-bottom: 0; width: 100%; aspect-ratio: unset; height: 7rem; } } .hero-carousel__caption:before { content: ''; display: block; width: 100%; height: 100%; background-color: #383836; opacity: 0.6; border-radius: 18px; position: absolute; top: 0; left: 0; left: 50%; transform: translateX(-50%); width: 100vw; border-radius: 0; } .hero-carousel__caption-heading { color: white; font-size: 1.8rem; font-weight: 500; height: 50%; position: relative; } @media (min-width: 1200px) { .hero-carousel__caption-heading { font-size: 2.4rem; } } .hero-carousel__caption-heading:before { content: ''; display: none; position: absolute; width: 10px; height: auto; aspect-ratio: 1; right: calc( 100% + 0.5rem); top: 1.25rem; width: 36px; height: auto; aspect-ratio: 36.17 / 10.94; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36.17' height='10.94'%3E%3Cg data-name='Group 153' fill='none' stroke='%23fff'%3E%3Cpath data-name='Line 6' d='M36.17 5.47h-36'/%3E%3Cpath data-name='Line 7' d='m14.17 10.47-14-5'/%3E%3Cpath data-name='Line 8' d='m14.17.47-14 5'/%3E%3C/g%3E%3C/svg%3E"); transition: transform 150ms cubic-bezier(0.215, 0.61, 0.355, 1); } @media (min-width: 1200px) { .hero-carousel__caption-heading:before { display: block; } } .hero-carousel__caption-heading span, .hero-carousel__caption-heading a { position: absolute; opacity: 1; transition: opacity 450ms cubic-bezier(0.215, 0.61, 0.355, 1), color 350ms cubic-bezier(0.215, 0.61, 0.355, 1); pointer-events: none; } .hero-carousel__caption-heading span._is-active, .hero-carousel__caption-heading a._is-active { transition: opacity 450ms cubic-bezier(0.215, 0.61, 0.355, 1), color 350ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: none; display: block; opacity: 1; } .hero-carousel__caption-heading span:nth-child(n+2):not(.hero-carousel__caption-back), .hero-carousel__caption-heading a:nth-child(n+2):not(.hero-carousel__caption-back) { display: none; } .hero-carousel__caption-heading:hover:before { transform: translateX(-1rem); } .hero-carousel__caption a.hero-carousel__caption-back { color: white; opacity: 0; position: absolute; font-size: 2.4rem; line-height: 1.3; pointer-events: all; transition: opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1), color 350ms cubic-bezier(0.215, 0.61, 0.355, 1); } .hero-carousel__caption a.hero-carousel__caption-back i { display: none; } .hero-carousel__caption a.hero-carousel__caption-back:hover { color: var(--brand--orange); color: white; } .hero-carousel__caption a.hero-carousel__caption-back:hover i { background-color: var(--brand--orange); background-color: white; transform: translateX(-1rem); } .hero-carousel__caption-heading:hover a[data-index] { opacity: 0; } .hero-carousel__caption-heading:hover a.hero-carousel__caption-back { opacity: 1; transition: opacity 450ms cubic-bezier(0.215, 0.61, 0.355, 1), color 150ms cubic-bezier(0.215, 0.61, 0.355, 1); } .hero-carousel__caption-progress { gap: 0.5rem; position: absolute; bottom: 1.5rem; display: flex; } .hero-carousel__caption-progress i { flex-shrink: 0; contain: content; background-color: white; width: 7px; height: 7px; opacity: 0.5; transition: all 550ms cubic-bezier(0.215, 0.61, 0.355, 1); border-radius: 8px; cursor: pointer; } .hero-carousel__caption-progress i.is-active { opacity: 1; width: 48px; } .hero-carousel__images { background-color: #787773; overflow: hidden; } .hero-carousel__images img, .hero-carousel__images video { opacity: 0; transition: opacity 450ms cubic-bezier(0.215, 0.61, 0.355, 1); width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .hero-carousel__images.flickity-enabled.is-active img, .hero-carousel__images.flickity-enabled.is-active video { opacity: 1; } .hero-carousel__images:after { content: ''; content: none; display: block; aspect-ratio: 1; width: 960px; height: auto; background-image: radial-gradient(white, transparent 480px); position: absolute; top: -480px; right: calc( -1 * (960px * 0.2)); } @media (min-width: 1400px) { .hero-carousel__images:after { right: calc( (100vw - 1400px) / 2 - (960px * 0.2)); } } .hero-carousel__text { width: 100%; } .hero-carousel:after { content: ''; content: none; display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='436.04' height='430.43'%3E%3Cg data-name='Group 176'%3E%3Cpath data-name='Subtraction 1' d='M0 383.6h20v46.83l-20-20v-26.82Z' fill='%2329235c'/%3E%3Cpath data-name='Rectangle 6' fill='%23951b81' d='m421.9 0 14.14 14.14L19.76 430.43 5.6 416.29z'/%3E%3C/g%3E%3C/svg%3E"); aspect-ratio: 436 / 430; width: 436px; height: auto; position: absolute; left: calc( 100vw - 225px); bottom: calc( 0px - 46px); z-index: 9; pointer-events: none; } .hero-carousel:before { content: ''; content: none; display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='821.04' height='1296.52'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='.52' y1='.76' x2='.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23f9b233'/%3E%3Cstop offset='1' stop-color='%23b48026'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg data-name='Group 177'%3E%3Cpath data-name='Rectangle 5' transform='rotate(135 144.93 811.23)' fill='url(%23a)' d='M0 0h20v929H0z'/%3E%3Cpath data-name='Rectangle 60' fill='%23f9b233' d='m671.04 656.9-14.14 14.14L0 14.14 14.14 0z'/%3E%3C/g%3E%3C/svg%3E"); aspect-ratio: 821 / 1296; width: 821px; height: auto; position: absolute; left: calc( 100vw - 373px); bottom: calc( 0px - 562px); pointer-events: none; } .home-hero { margin-top: -120px; min-height: 480px; max-height: 1080px; aspect-ratio: 1920 / 1080; width: 100%; position: relative; } @media (min-width: 576px) { .home-hero { margin-top: -150px; } } @media (min-width: 1264px) { .home-hero { margin-top: -225px; } } .home-hero__caption { aspect-ratio: 380 / 130; width: 300px; height: auto; position: relative; padding: 1rem; margin-bottom: 2rem; margin-bottom: 0; width: 100%; aspect-ratio: unset; height: 6rem; } @media (min-width: 1200px) { .home-hero__caption { aspect-ratio: 420 / 130; width: 380px; margin-bottom: 3rem; margin-bottom: 0; width: 100%; aspect-ratio: unset; height: 7rem; } } .home-hero__caption:before { content: ''; display: block; width: 100%; height: 100%; background-color: #383836; opacity: 0.6; border-radius: 18px; position: absolute; top: 0; left: 0; left: 50%; transform: translateX(-50%); width: 100vw; border-radius: 0; } .home-hero__caption-heading { color: white; font-size: 1.8rem; font-weight: 500; } @media (min-width: 1200px) { .home-hero__caption-heading { font-size: 2.4rem; } } .home-hero__caption-heading span, .home-hero__caption-heading a { position: absolute; opacity: 0; transition: opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1), color 350ms cubic-bezier(0.215, 0.61, 0.355, 1); pointer-events: none; } .home-hero__caption-heading span.is-active, .home-hero__caption-heading a.is-active { transition: opacity 450ms cubic-bezier(0.215, 0.61, 0.355, 1), color 350ms cubic-bezier(0.215, 0.61, 0.355, 1); display: block; opacity: 1; } .home-hero__caption-heading span:not([href=""]).is-active, .home-hero__caption-heading a:not([href=""]).is-active { pointer-events: all; } .home-hero__caption-heading span:not([href=""]).is-active:hover, .home-hero__caption-heading a:not([href=""]).is-active:hover { color: var(--brand--yellow); } .home-hero__caption-progress { gap: 0.5rem; position: absolute; bottom: 1.5rem; display: flex; } .home-hero__caption-progress i { flex-shrink: 0; contain: content; background-color: white; width: 7px; height: 7px; opacity: 0.5; transition: all 550ms cubic-bezier(0.215, 0.61, 0.355, 1); border-radius: 8px; cursor: pointer; } .home-hero__caption-progress i.is-active { opacity: 1; width: 48px; } .home-hero__images { background-color: #787773; overflow: hidden; } .home-hero__images img { opacity: 0; transition: opacity 450ms cubic-bezier(0.215, 0.61, 0.355, 1); } .home-hero__images.flickity-enabled.is-active img { opacity: 1; } .home-hero__images img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .home-hero__images:after { content: ''; content: none; display: block; aspect-ratio: 1; width: 960px; height: auto; background-image: radial-gradient(white, transparent 480px); position: absolute; top: -480px; right: calc( -1 * (960px * 0.2)); } @media (min-width: 1400px) { .home-hero__images:after { right: calc( (100vw - 1400px) / 2 - (960px * 0.2)); } } .home-hero__text { width: 100%; } .home-hero:after { content: ''; display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='436.04' height='430.43'%3E%3Cg data-name='Group 176'%3E%3Cpath data-name='Subtraction 1' d='M0 383.6h20v46.83l-20-20v-26.82Z' fill='%2329235c'/%3E%3Cpath data-name='Rectangle 6' fill='%23951b81' d='m421.9 0 14.14 14.14L19.76 430.43 5.6 416.29z'/%3E%3C/g%3E%3C/svg%3E"); aspect-ratio: 436 / 430; width: 436px; height: auto; position: absolute; left: calc( 100vw - 225px); bottom: calc( 0px - 46px); z-index: 9; pointer-events: none; } .home-hero:before { content: ''; display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='821.04' height='1296.52'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='.52' y1='.76' x2='.5' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23f9b233'/%3E%3Cstop offset='1' stop-color='%23b48026'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg data-name='Group 177'%3E%3Cpath data-name='Rectangle 5' transform='rotate(135 144.93 811.23)' fill='url(%23a)' d='M0 0h20v929H0z'/%3E%3Cpath data-name='Rectangle 60' fill='%23f9b233' d='m671.04 656.9-14.14 14.14L0 14.14 14.14 0z'/%3E%3C/g%3E%3C/svg%3E"); aspect-ratio: 821 / 1296; width: 821px; height: auto; position: absolute; left: calc( 100vw - 373px); bottom: calc( 0px - 562px); pointer-events: none; } .icon--right-arrow { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36.17' height='10.94'%3E%3Cg data-name='Group 27' fill='none' stroke='%23fff'%3E%3Cpath data-name='Line 6' d='M0 5.47h36'/%3E%3Cpath data-name='Line 7' d='m22 .47 14 5'/%3E%3Cpath data-name='Line 8' d='m22 10.47 14-5'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36.17' height='10.94'%3E%3Cg data-name='Group 27' fill='none' stroke='%23fff'%3E%3Cpath data-name='Line 6' d='M0 5.47h36'/%3E%3Cpath data-name='Line 7' d='m22 .47 14 5'/%3E%3Cpath data-name='Line 8' d='m22 10.47 14-5'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; background-color: white; aspect-ratio: 36.17 / 10.94; width: 36px; height: auto; } .icon--right-arrow-new { mask-image: url(../img/right-arrow.svg); -webkit-mask-image: url(../img/right-arrow.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; background-color: white; aspect-ratio: 36.17 / 10.94; width: 36px; height: auto; } .icon--left-arrow { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36.17' height='10.94'%3E%3Cg data-name='Group 17' fill='none' stroke='%23fff'%3E%3Cpath data-name='Line 6' d='M36.17 5.47h-36'/%3E%3Cpath data-name='Line 7' d='m14.17 10.47-14-5'/%3E%3Cpath data-name='Line 8' d='m14.17.47-14 5'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36.17' height='10.94'%3E%3Cg data-name='Group 17' fill='none' stroke='%23fff'%3E%3Cpath data-name='Line 6' d='M36.17 5.47h-36'/%3E%3Cpath data-name='Line 7' d='m14.17 10.47-14-5'/%3E%3Cpath data-name='Line 8' d='m14.17.47-14 5'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; background-color: white; aspect-ratio: 36.17 / 10.94; width: 36px; height: auto; } .icon--facebook { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52.96' height='52.96'%3E%3Cg data-name='Group 177' fill='%23383836'%3E%3Cpath data-name='Path 279' d='m31.67 22.45-.27 3.64h-3.55V38.3h-4.68V26.1H20.8v-3.65h2.37v-3.52s-.17-4.03 4.68-4.25a15.71 15.71 0 0 1 4.31.42l-.5 3.59s-3.81-1.19-3.81 1.12v2.64Z'/%3E%3Cpath data-name='Path 280' d='M26.48 52.96a26.48 26.48 0 1 1 26.48-26.48 26.51 26.51 0 0 1-26.48 26.48m0-49.32a22.84 22.84 0 1 0 22.84 22.84A22.87 22.87 0 0 0 26.48 3.64'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52.96' height='52.96'%3E%3Cg data-name='Group 177' fill='%23383836'%3E%3Cpath data-name='Path 279' d='m31.67 22.45-.27 3.64h-3.55V38.3h-4.68V26.1H20.8v-3.65h2.37v-3.52s-.17-4.03 4.68-4.25a15.71 15.71 0 0 1 4.31.42l-.5 3.59s-3.81-1.19-3.81 1.12v2.64Z'/%3E%3Cpath data-name='Path 280' d='M26.48 52.96a26.48 26.48 0 1 1 26.48-26.48 26.51 26.51 0 0 1-26.48 26.48m0-49.32a22.84 22.84 0 1 0 22.84 22.84A22.87 22.87 0 0 0 26.48 3.64'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; background-color: #383836; aspect-ratio: 1; width: 52px; height: auto; } .icon--instagram { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52.96' height='52.96'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath data-name='Path 281' d='M22.44 26.48a4.04 4.04 0 1 1 4.04 4.05 4.04 4.04 0 0 1-4.04-4.05m-2.2 0a6.23 6.23 0 1 0 6.24-6.23 6.23 6.23 0 0 0-6.23 6.23M31.5 20a1.46 1.46 0 1 0 1.46-1.46A1.46 1.46 0 0 0 31.5 20m-9.93 16.36a6.74 6.74 0 0 1-2.25-.42 3.78 3.78 0 0 1-1.4-.9 3.74 3.74 0 0 1-.9-1.4 6.82 6.82 0 0 1-.42-2.26c-.06-1.28-.07-1.66-.07-4.9s0-3.63.07-4.9a6.81 6.81 0 0 1 .41-2.26 4.03 4.03 0 0 1 2.3-2.3 6.7 6.7 0 0 1 2.26-.42c1.28-.05 1.66-.07 4.9-.07s3.63.02 4.91.07a6.69 6.69 0 0 1 2.26.42 4.01 4.01 0 0 1 2.3 2.3 6.67 6.67 0 0 1 .41 2.26c.06 1.28.07 1.66.07 4.9s0 3.62-.07 4.9a6.68 6.68 0 0 1-.42 2.26 3.73 3.73 0 0 1-.9 1.4 3.8 3.8 0 0 1-1.4.9 6.74 6.74 0 0 1-2.26.42c-1.28.06-1.66.07-4.9.07s-3.63-.01-4.9-.07m-.1-21.95a8.94 8.94 0 0 0-2.95.57 6.2 6.2 0 0 0-3.55 3.55 8.93 8.93 0 0 0-.57 2.94c-.06 1.3-.07 1.71-.07 5s.01 3.71.07 5a8.91 8.91 0 0 0 .57 2.95 6.2 6.2 0 0 0 3.55 3.55 8.97 8.97 0 0 0 2.94.56c1.3.06 1.71.08 5 .08s3.72-.02 5-.08a8.97 8.97 0 0 0 2.95-.56 6.21 6.21 0 0 0 3.55-3.55 8.87 8.87 0 0 0 .57-2.95c.06-1.3.07-1.7.07-5s-.01-3.7-.07-5a8.88 8.88 0 0 0-.57-2.94 6.2 6.2 0 0 0-3.55-3.55 8.95 8.95 0 0 0-2.94-.57c-1.3-.06-1.71-.07-5-.07s-3.71.01-5 .07M3.63 26.48a22.84 22.84 0 1 1 22.84 22.84A22.87 22.87 0 0 1 3.64 26.48M26.48 0a26.48 26.48 0 1 0 26.48 26.48A26.51 26.51 0 0 0 26.48 0Z' fill='%23383836'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg data-name='Group 120' clip-path='url(%23a)'%3E%3Cpath data-name='Rectangle 90' fill='%23383836' d='m-26.48 26.48 52.96-52.96 52.96 52.96-52.96 52.96z'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52.96' height='52.96'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath data-name='Path 281' d='M22.44 26.48a4.04 4.04 0 1 1 4.04 4.05 4.04 4.04 0 0 1-4.04-4.05m-2.2 0a6.23 6.23 0 1 0 6.24-6.23 6.23 6.23 0 0 0-6.23 6.23M31.5 20a1.46 1.46 0 1 0 1.46-1.46A1.46 1.46 0 0 0 31.5 20m-9.93 16.36a6.74 6.74 0 0 1-2.25-.42 3.78 3.78 0 0 1-1.4-.9 3.74 3.74 0 0 1-.9-1.4 6.82 6.82 0 0 1-.42-2.26c-.06-1.28-.07-1.66-.07-4.9s0-3.63.07-4.9a6.81 6.81 0 0 1 .41-2.26 4.03 4.03 0 0 1 2.3-2.3 6.7 6.7 0 0 1 2.26-.42c1.28-.05 1.66-.07 4.9-.07s3.63.02 4.91.07a6.69 6.69 0 0 1 2.26.42 4.01 4.01 0 0 1 2.3 2.3 6.67 6.67 0 0 1 .41 2.26c.06 1.28.07 1.66.07 4.9s0 3.62-.07 4.9a6.68 6.68 0 0 1-.42 2.26 3.73 3.73 0 0 1-.9 1.4 3.8 3.8 0 0 1-1.4.9 6.74 6.74 0 0 1-2.26.42c-1.28.06-1.66.07-4.9.07s-3.63-.01-4.9-.07m-.1-21.95a8.94 8.94 0 0 0-2.95.57 6.2 6.2 0 0 0-3.55 3.55 8.93 8.93 0 0 0-.57 2.94c-.06 1.3-.07 1.71-.07 5s.01 3.71.07 5a8.91 8.91 0 0 0 .57 2.95 6.2 6.2 0 0 0 3.55 3.55 8.97 8.97 0 0 0 2.94.56c1.3.06 1.71.08 5 .08s3.72-.02 5-.08a8.97 8.97 0 0 0 2.95-.56 6.21 6.21 0 0 0 3.55-3.55 8.87 8.87 0 0 0 .57-2.95c.06-1.3.07-1.7.07-5s-.01-3.7-.07-5a8.88 8.88 0 0 0-.57-2.94 6.2 6.2 0 0 0-3.55-3.55 8.95 8.95 0 0 0-2.94-.57c-1.3-.06-1.71-.07-5-.07s-3.71.01-5 .07M3.63 26.48a22.84 22.84 0 1 1 22.84 22.84A22.87 22.87 0 0 1 3.64 26.48M26.48 0a26.48 26.48 0 1 0 26.48 26.48A26.51 26.51 0 0 0 26.48 0Z' fill='%23383836'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg data-name='Group 120' clip-path='url(%23a)'%3E%3Cpath data-name='Rectangle 90' fill='%23383836' d='m-26.48 26.48 52.96-52.96 52.96 52.96-52.96 52.96z'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; background-color: #383836; aspect-ratio: 1; width: 52px; height: auto; } .icon--linkedin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg data-name='Group 177' xmlns='http://www.w3.org/2000/svg' width='52.96' height='52.96'%3E%3Cpath data-name='Path 282' d='M26.48 0a26.48 26.48 0 1 0 26.48 26.48A26.51 26.51 0 0 0 26.48 0m0 49.33a22.84 22.84 0 1 1 22.84-22.85 22.87 22.87 0 0 1-22.84 22.85' fill='%23383836'/%3E%3Cpath data-name='Rectangle 91' fill='%23383836' d='M16.72 22.58H21v13.76h-4.28z'/%3E%3Cpath data-name='Path 283' d='M18.88 16.62a2.14 2.14 0 1 0 2.25 2.13 2.12 2.12 0 0 0-2.25-2.13' fill='%23383836'/%3E%3Cpath data-name='Path 284' d='M31.43 22.27a4.95 4.95 0 0 0-4.25 2.23h-.08l-.2-1.91h-3.71c.05 1.23.11 2.67.11 4.39v9.37h4.28V28.4a3.07 3.07 0 0 1 .14-1.07 2.35 2.35 0 0 1 2.2-1.6c1.54 0 2.16 1.21 2.16 2.98v7.63h4.28v-8.13c0-4.06-2.1-5.94-4.93-5.94' fill='%23383836'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg data-name='Group 177' xmlns='http://www.w3.org/2000/svg' width='52.96' height='52.96'%3E%3Cpath data-name='Path 282' d='M26.48 0a26.48 26.48 0 1 0 26.48 26.48A26.51 26.51 0 0 0 26.48 0m0 49.33a22.84 22.84 0 1 1 22.84-22.85 22.87 22.87 0 0 1-22.84 22.85' fill='%23383836'/%3E%3Cpath data-name='Rectangle 91' fill='%23383836' d='M16.72 22.58H21v13.76h-4.28z'/%3E%3Cpath data-name='Path 283' d='M18.88 16.62a2.14 2.14 0 1 0 2.25 2.13 2.12 2.12 0 0 0-2.25-2.13' fill='%23383836'/%3E%3Cpath data-name='Path 284' d='M31.43 22.27a4.95 4.95 0 0 0-4.25 2.23h-.08l-.2-1.91h-3.71c.05 1.23.11 2.67.11 4.39v9.37h4.28V28.4a3.07 3.07 0 0 1 .14-1.07 2.35 2.35 0 0 1 2.2-1.6c1.54 0 2.16 1.21 2.16 2.98v7.63h4.28v-8.13c0-4.06-2.1-5.94-4.93-5.94' fill='%23383836'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; background-color: #383836; aspect-ratio: 1; width: 52px; height: auto; } .wrapper { width: 100%; max-width: 100%; } @media (min-width: 1056px) { .wrapper { max-width: 992px; } } @media (min-width: 1264px) { .wrapper { max-width: 1200px; } } @media (min-width: 1464px) { .wrapper { max-width: 1400px; } } .mobile-navigation { background-color: #161B4B; color: white; text-align: right; padding: 4rem; max-width: 360px; z-index: 9999; transition: transform 350ms cubic-bezier(0.215, 0.61, 0.355, 1); } .mobile-navigation__close { margin-left: auto; } .mobile-navigation__close svg { transition: transform 350ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 350ms cubic-bezier(0.215, 0.61, 0.355, 1); } .mobile-navigation__close:hover svg { transform: rotate(-180deg); opacity: 0.7; } .mobile-navigation li { font-weight: 500; transition: opacity 1250ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 1250ms cubic-bezier(0.215, 0.61, 0.355, 1); transition-delay: 0.3s; will-change: opacity, transform; } .mobile-navigation li a { position: relative; color: white; transition: transform 350ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 350ms cubic-bezier(0.215, 0.61, 0.355, 1); } .mobile-navigation li a:after { content: ''; display: block; background-color: white; position: absolute; height: 1px; width: 100%; bottom: -2px; left: 0; transform: scaleX(0); transform-origin: 0 50%; transition: transform 350ms cubic-bezier(0.215, 0.61, 0.355, 1); } .mobile-navigation li a:hover { opacity: 0.7; } .mobile-navigation li.current-menu-item a:after { transform: scaleX(1); } .mobile-navigation li:not(.animate-in) { opacity: 0; transform: translateX(2rem); } .mobile-navigation li.animate-in { opacity: 1; transform: translateX(0); } .news-grid { --gap: 1rem; } @media (min-width: 992px) { .news-grid { --gap: 2rem; } } .news-grid.section { margin-top: -3rem; } .news-grid__items:not(.flickity-enabled) { gap: var(--gap); display: flex; flex-wrap: wrap; } @media (min-width: 992px) { .news-grid__items:not(.flickity-enabled) { flex-wrap: wrap; } } .news-grid__items:not(.flickity-enabled) .news-grid__item { width: 100%; margin: 0; } @media (min-width: 768px) { .news-grid__items:not(.flickity-enabled) .news-grid__item { width: calc( 100% / 3 - var(--gap) * 2 / 3); } } @media (min-width: 768px) { .news-grid__items:not(.flickity-enabled) .news-grid__item:nth-child(1), .news-grid__items:not(.flickity-enabled) .news-grid__item:nth-child(2) { width: calc( 100% / 2 - var(--gap) * 1 / 2); } } .news-grid__item { display: block; cursor: pointer; width: 310px; flex: none; margin-right: var(--gap); display: flex; flex-direction: column; } @media (min-width: 992px) { .news-grid__item { position: relative; width: calc( 100% / 2 - var(--gap) * 1 / 2); flex: none; margin-right: 0; } } .news-grid__item:hover { opacity: 0.8; } .news-grid__item:hover i.icon--right-arrow { transform: translateX(0.5rem); } .news-grid__item-date { font-size: 1.3rem; margin-bottom: 1rem; color: var(--brand--orange); } .news-grid__item-image { aspect-ratio: 560 / 410; width: 100%; overflow: hidden; margin-bottom: 1.5rem; } @media (min-width: 768px) { .news-grid__item-image { margin-bottom: 2rem; } } .news-grid__item-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .news-grid__item-heading { color: var(--brand--primary-color); margin-bottom: 1rem; } .news-grid__item-text { margin-top: 1.5rem; margin-bottom: 1.5rem; min-height: 3rem; display: none; } .news-grid__item-cta { border-top: 2px solid var(--brand--primary-color); padding-top: 1rem; margin-top: auto; } .news-grid__item-cta i.icon--right-arrow { background-color: var(--brand--primary-color); } .news-grid__cta { margin-top: 3rem; } .news-grid ._flickity-prev-next-button.previous, .news-grid ._flickity-prev-next-button.next { border: 1px solid var(--brand--secondary-color); background-color: var(--brand--secondary-color); width: 2rem; height: 3rem; border-radius: 1px; box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.1); left: 0; } .news-grid ._flickity-prev-next-button.previous:disabled, .news-grid ._flickity-prev-next-button.next:disabled { opacity: 0; } .news-grid ._flickity-prev-next-button.previous:hover, .news-grid ._flickity-prev-next-button.next:hover { opacity: 0.8; } .news-grid ._flickity-prev-next-button.previous { left: 0; } .news-grid ._flickity-prev-next-button.next { left: auto; right: 0; } .news__tag { position: relative; } .news__tag:before { content: ''; display: block; position: absolute; width: 10px; height: auto; aspect-ratio: 1; right: calc( 100% + 0.5rem); top: 0.62rem; width: 36px; height: auto; aspect-ratio: 36.17 / 10.94; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36.17' height='10.94'%3E%3Cg data-name='Group 153' fill='none' stroke='%23fff'%3E%3Cpath data-name='Line 6' d='M36.17 5.47h-36'/%3E%3Cpath data-name='Line 7' d='m14.17 10.47-14-5'/%3E%3Cpath data-name='Line 8' d='m14.17.47-14 5'/%3E%3C/g%3E%3C/svg%3E"); transition: transform 150ms cubic-bezier(0.215, 0.61, 0.355, 1); } .news__tag span { transition: opacity 450ms cubic-bezier(0.215, 0.61, 0.355, 1); } .news__tag span:nth-child(1) { opacity: 1; } .news__tag span:nth-child(2) { position: absolute; opacity: 0; left: 0; } .news__tag:hover:before { transform: translateX(-1rem); } .news__tag:hover span:nth-child(1) { opacity: 0; transition: opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1); } .news__tag:hover span:nth-child(2) { opacity: 1; transition: opacity 450ms cubic-bezier(0.215, 0.61, 0.355, 1); } .news__image { margin-bottom: 2rem; width: 100%; aspect-ratio: 3/2; } .news__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .news__content { margin-bottom: 2rem; } .news__back { font-size: 1.2rem; } .news__back a { color: var(--brand--tertiary-color); } .news__back a i { background-color: var(--brand--tertiary-color); } .news__back a:hover i { transform: translateX(-1rem); } .news .entry-content .gallery { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 3rem !important; margin-bottom: 3rem !important; } @media (min-width: 992px) { .news .entry-content .gallery { gap: 2rem; } } .news .entry-content .gallery-item { width: calc(33.333% - 1rem * 2/3) !important; flex: none; float: none !important; margin: 0 !important; transition: opacity 150ms cubic-bezier(0.215, 0.61, 0.355, 1); } @media (min-width: 992px) { .news .entry-content .gallery-item { width: calc(33.333% - 2rem * 2/3) !important; } } .news .entry-content .gallery-item:hover { opacity: 0.8; } .news .entry-content .gallery-item img { border: none !important; aspect-ratio: 1; width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; } .news .entry-content .gallery br { display: none; } .page-header { --gap: 2rem; } @media (min-width: 992px) { .page-header { --gap: 3rem; } } @media (min-width: 1264px) { .page-header { --gap: 4rem; } } .page-header .wrapper { gap: var(--gap); flex-direction: column; } @media (min-width: 992px) { .page-header .wrapper { flex-direction: row; } } .page-header__accred { position: absolute; top: 0; right: 0; width: 200px; } @media (min-width: 1200px) { .page-header__accred { width: 200px; } } @media (max-width: 1200px) { .page-header__accred { position: relative; left: 0; right: unset; margin: 2.8rem 0 0 0; } } .page-header__image { width: 100%; aspect-ratio: 700 / 540; } @media (min-width: 992px) { .page-header__image { order: -1; width: calc( 45% - var(--gap) * 0.55); } } .page-header__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .page-header--image .page-header__text { width: 100%; } @media (min-width: 992px) { .page-header--image .page-header__text { width: calc( 55% - var(--gap) * 0.45); } } .page-header--style-a .page-header__heading > * { text-wrap: pretty; max-width: 64rem; } .page-header--style-a .page-header__image { position: relative; } @media (min-width: 992px) { .page-header--style-a .page-header__image { aspect-ratio: unset; align-self: stretch; } } .page-header--style-a .page-header__image:before { content: ''; display: block; position: absolute; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='839.85' height='839.85'%3E%3Cpath data-name='Rectangle 6' fill='%23951b81' d='m825.7 0 14.15 14.14-825.7 825.7L0 825.7z'/%3E%3C/svg%3E"); aspect-ratio: 1; width: 839px; height: auto; left: -100px; bottom: 70px; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1535.64' height='1535.64'%3E%3Cpath data-name='Rectangle 6' fill='%23951b81' d='m1521.5 0 14.14 14.14-1521.5 1521.5L0 1521.5z'/%3E%3C/svg%3E"); width: 1535px; height: auto; left: -430px; bottom: -250px; opacity: 0.1; } @media (min-width: 1200px) { .page-header--style-a .page-header__image:before { opacity: 1; } } .page-header--style-a .page-header__image:after { content: ''; display: block; position: absolute; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='671.04' height='671.04'%3E%3Cpath data-name='Rectangle 100' fill='%23fca01f' d='m671.04 656.9-14.14 14.14L0 14.14 14.14 0z'/%3E%3C/svg%3E"); aspect-ratio: 1; width: 671px; height: auto; left: -150px; bottom: -390px; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1867.96' height='1867.96'%3E%3Cpath data-name='Rectangle 100' fill='%23fca01f' d='m1867.96 1853.81-14.15 14.15L0 14.14 14.14 0z'/%3E%3C/svg%3E"); width: 1867px; height: auto; left: -1480px; bottom: -250px; } .page-header--style-a.page-header--image .page-header__heading > * { max-width: 49rem; } .page-header--style-b { text-align: center; } .page-header--style-b .wrapper { flex-direction: column; justify-content: center; } .page-header--style-b .page-header__heading h1 { margin-bottom: 0; } @media (max-width: 767px) { .page-header--style-b .page-header__heading h1 { margin-bottom: 0; } } .page-header--style-b .page-header__carousel { aspect-ratio: 1760 / 980; aspect-ratio: 3/2; width: 100vw; height: auto; margin-bottom: 1.5rem; } @media (min-width: 768px) { .page-header--style-b .page-header__carousel { width: 100%; aspect-ratio: 1760 / 980; } } @media (min-width: 1808px) { .page-header--style-b .page-header__carousel { width: 1760px; } } .page-header--style-b .page-header__carousel img { aspect-ratio: 1760 / 980; aspect-ratio: 3/2; width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; } @media (min-width: 768px) { .page-header--style-b .page-header__carousel img { aspect-ratio: 1760 / 980; } } .page-header--style-b .page-header__carousel .flickity-viewport { overflow: hidden; } .page-header--style-b .page-header__carousel .flickity-page-dots button { background-color: white; opacity: 0.5; outline: none; box-shadow: none; } .page-header--style-b .page-header__carousel .flickity-page-dots button.is-selected { opacity: 1; } .page-link-mosaic { background-color: #787773; color: white; position: relative; z-index: 9; } .page-link-mosaic__header { margin-bottom: 2rem; } .page-link-mosaic--style-a .page-link-mosaic__images { display: grid; gap: 0.5rem; grid-template-rows: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; aspect-ratio: 2060 / 1186; width: 107.29vw; position: relative; left: 50%; transform: translateX(-50%); } @media (min-width: 992px) { .page-link-mosaic--style-a .page-link-mosaic__images { gap: 1rem; } } @media (min-width: 1464px) { .page-link-mosaic--style-a .page-link-mosaic__images { aspect-ratio: 2060 / 1017; } } @media (min-width: 1920px) { .page-link-mosaic--style-a .page-link-mosaic__images { width: 2060px; height: auto; } } .page-link-mosaic--style-a .page-link-mosaic__image:nth-child(1) { grid-row: 1 / 5; grid-column: 1 / 2; } .page-link-mosaic--style-a .page-link-mosaic__image:nth-child(2) { grid-row: 1 / 3; grid-column: 2 / 3; } .page-link-mosaic--style-a .page-link-mosaic__image:nth-child(3) { grid-row: 1 / 3; grid-column: 3 / 4; } .page-link-mosaic--style-a .page-link-mosaic__image:nth-child(4) { grid-row: 1 / 4; grid-column: 4 / 5; } .page-link-mosaic--style-a .page-link-mosaic__image:nth-child(5) { grid-row: 3 / 5; grid-column: 2 / 4; } .page-link-mosaic--style-a .page-link-mosaic__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .page-link-mosaic--style-a .page-link-mosaic__cta { grid-row: 5 / 6; grid-column: 1 / 5; margin-top: 2rem; justify-content: center; } @media (min-width: 768px) { .page-link-mosaic--style-a .page-link-mosaic__cta { margin-top: 2.5rem; justify-content: center; } } @media (min-width: 992px) { .page-link-mosaic--style-a .page-link-mosaic__cta { margin-top: 4rem; justify-content: center; } } @media (min-width: 1464px) { .page-link-mosaic--style-a .page-link-mosaic__cta { margin-top: 0; grid-row: 4 / 5; grid-column: 4 / 5; } } @media (min-width: 1464px) { .page-link-mosaic--style-a .page-link-mosaic__cta a { transform: translateX(-12.5%); } } .page-link-mosaic--style-b { background-image: linear-gradient(to bottom, #383836, #787773); color: white; } .page-link-mosaic--style-b .page-link-mosaic .wrapper { position: relative; } @media (min-width: 992px) { .page-link-mosaic--style-b .page-link-mosaic__header { position: absolute; width: 35%; aspect-ratio: 1; display: flex; flex-direction: column; /* align-items: center; */ justify-content: center; max-width: 370px; aspect-ratio: 1.8; } } @media (min-width: 1264px) { .page-link-mosaic--style-b .page-link-mosaic__header { aspect-ratio: 1.3; } } @media (min-width: 1464px) { .page-link-mosaic--style-b .page-link-mosaic__header { aspect-ratio: 1.1; } } .page-link-mosaic--style-b .page-link-mosaic__images { max-width: 1400px; margin-left: auto; margin-right: auto; aspect-ratio: 1417 / 1195; width: 100%; height: auto; display: grid; align-content: start; gap: 0.5rem; margin-top: 0; margin-bottom: -7.5rem; } @media (min-width: 576px) { .page-link-mosaic--style-b .page-link-mosaic__images { margin-top: -5rem; margin-bottom: -7.5rem; } } @media (min-width: 768px) { .page-link-mosaic--style-b .page-link-mosaic__images { margin-bottom: -7rem; } } @media (min-width: 992px) { .page-link-mosaic--style-b .page-link-mosaic__images { gap: 1rem; margin-top: -7rem; margin-bottom: -10rem; } } @media (min-width: 1400px) { .page-link-mosaic--style-b .page-link-mosaic__images { margin-bottom: -11rem; } } .page-link-mosaic--style-b .page-link-mosaic__image img { -o-object-fit: cover; object-fit: cover; } .page-link-mosaic--style-b .page-link-mosaic__image:nth-child(1) { grid-column: 1 / 3; } .page-link-mosaic--style-b .page-link-mosaic__image:nth-child(1) img { aspect-ratio: 930 / 640; width: 65%; height: auto; margin-left: auto; } .page-link-mosaic--style-b .page-link-mosaic__image:nth-child(2) { grid-column: 1 / 2; transform: translateY(-25%); } .page-link-mosaic--style-b .page-link-mosaic__image:nth-child(2) img { width: 68%; height: auto; aspect-ratio: 1; margin-left: auto; } .page-link-mosaic--style-b .page-link-mosaic__image:nth-child(3) { grid-column: 2 / 3; } .page-link-mosaic--style-b .page-link-mosaic__image:nth-child(3) img { width: 100%; height: auto; aspect-ratio: 733 / 500; } .popup--team-member { position: relative; padding: 2rem; width: 100%; max-width: 1200px; background: transparent; color: white; } @media (min-width: 768px) { .popup--team-member { width: 95%; } } .popup--team-member__main { gap: 2rem; flex-direction: column; } @media (min-width: 768px) { .popup--team-member__main { gap: 2rem; flex-direction: row; align-items: flex-start; } } .popup--team-member__image { width: 30%; flex: none; width: 100%; overflow: hidden; margin-left: auto; margin-right: auto; } @media (min-width: 576px) { .popup--team-member__image { width: 240px; } } @media (min-width: 768px) { .popup--team-member__image { width: 240px; margin-left: 0; } } @media (min-width: 992px) { .popup--team-member__image { width: 420px; } } .popup--team-member__image img { -o-object-fit: cover; object-fit: cover; } .popup--team-member__text { flex: 1; } .popup--team-member__links { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.5rem; position: relative; font-weight: 600; min-height: 56px; } .popup--team-member__links a { text-decoration: underline; } .popup--team-member__links [data-linkedin] { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 50px; height: auto; aspect-ratio: 1; } .popup--team-member__links [data-linkedin] i { background-color: white; } .popup--team-member__links [data-phone][href="tel:"], .popup--team-member__links [data-email][href="mailto:"], .popup--team-member__links [data-linkedin][href=""] { display: none; } .popup--team-member [data-bio] { font-size: 1rem; } .popup--team-member [data-name] { font-weight: 500; margin-bottom: 0; font-size: 1.5rem; } .popup--team-member [data-role] { margin-bottom: 2rem; font-size: 1.1rem; } .popup--team-member .mfp-close { position: absolute; top: 0; right: 0; font-size: 3rem; color: white !important; } .mfp-bg { background-color: #161B4B !important; opacity: 1; } .mfp-zoom-in.mfp-ready.mfp-bg { opacity: 1; } .primary-navigation { display: none; margin-left: auto; } @media (min-width: 992px) { .primary-navigation { display: block; } } .primary-navigation .nav-menu { gap: 2.5rem; } .primary-navigation li { font-size: 1.1rem; } .primary-navigation li a { position: relative; } .primary-navigation li a:after { content: ''; display: block; background-color: var(--brand--primary-color); position: absolute; height: 1px; width: 100%; bottom: 0px; left: 0; transform: scaleX(0); transform-origin: 0 50%; transition: transform 350ms cubic-bezier(0.215, 0.61, 0.355, 1); } .primary-navigation li.current-menu-item a:after, .primary-navigation li a:hover:after { transform: scaleX(1); } .project-carousel__header { flex-direction: column; align-items: flex-start; } @media (min-width: 768px) { .project-carousel__header { align-items: center; flex-direction: row; } } .project-carousel__item-image { border-radius: 25px; overflow: hidden; aspect-ratio: 1; width: 320px; height: auto; } @media (min-width: 768px) { .project-carousel__item-image { width: 430px; } } @media (min-width: 1464px) { .project-carousel__item-image { width: 500px; } } .project-carousel__item-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .project-carousel__item-text { margin-top: 1.5rem; font-size: 1.5rem; } .project-carousel__item:hover .project-carousel__item-text { color: white; } .flickity-enabled .project-carousel__item { margin-right: 1.5rem; } @media (min-width: 768px) { .flickity-enabled .project-carousel__item { margin-right: 2rem; } } .project-carousel__cta { color: var(--brand--tertiary-color); font-size: 1.3rem; margin-top: -2.5rem; margin-bottom: 2rem; } @media (min-width: 768px) { .project-carousel__cta { margin-top: -1.75rem; margin-bottom: 0; } } .project-carousel__cta a i { background-color: var(--brand--tertiary-color); } .project-carousel__cta a:hover { color: white; } .project-carousel__cta a:hover i { background-color: white; } .project-credits { max-width: 1920px; margin-left: auto; margin-right: auto; background-color: #787773; color: white; position: relative; } .project-credits .wrapper { position: static; flex-direction: column; } @media (min-width: 1200px) { .project-credits .wrapper { flex-direction: row; } } .project-credits__text, .project-credits__image { width: 100%; } @media (min-width: 1200px) { .project-credits__text, .project-credits__image { width: 50%; } } .project-credits__text { padding: 2.5rem 2rem; } @media (min-width: 576px) { .project-credits__text { padding: 3rem 2rem; } } @media (min-width: 1200px) { .project-credits__text { padding: 4rem 2rem; } } .project-credits__text > * { max-width: 680px; } @media (min-width: 1200px) { .project-credits__text > * { margin-left: auto; margin-right: auto; } } .project-credits__text .entry-content ul { display: block; } @media (min-width: 768px) { .project-credits__text .entry-content ul { -moz-columns: 2; columns: 2; } } .project-credits__image { aspect-ratio: 960 / 710; align-self: stretch; overflow: hidden; position: relative; width: 100vw; left: 50%; transform: translateX(-50%); } @media (min-width: 1200px) { .project-credits__image { position: absolute; top: 0; right: 0; width: calc( 50%); height: 100%; left: auto; transform: none; } } .project-credits__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .project-grid__items { gap: 2rem 2rem; flex-wrap: wrap; } @media (min-width: 768px) { .project-grid__items { gap: 5rem 2rem; } } .project-grid__item { display: flex; flex-direction: column; } @media (min-width: 768px) { .project-grid__item { width: calc( 50% - 2rem * 0.5); flex: none; } } .project-grid__item-image { aspect-ratio: 860 / 587; width: 100%; height: auto; } .project-grid__item-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .project-grid__item-text { margin-top: 1rem; font-size: 1.5rem; } @media (min-width: 768px) { .project-grid__item-text { margin-top: 1.5rem; } } .project-grid__item-text * { text-wrap: pretty; max-width: 62rem; } .project-grid__item:hover .project-grid__item-text { color: white; } .project-grid__item--ad { width: 100%; flex: none; order: 6; margin-top: 3rem; margin-bottom: 3rem; } @media (min-width: 768px) { .project-grid__item--ad { margin-top: 0; margin-bottom: 3rem; } } .project-grid__item--ad .project-grid__item-heading { font-size: 1.8rem; max-width: 68rem; margin-left: auto; margin-right: auto; } @media (min-width: 768px) { .project-grid__item--ad .project-grid__item-heading { font-size: 2.3rem; } } .project-grid__item--ad .logo { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='61' height='67.37'%3E%3Cg data-name='Group 142'%3E%3Cpath data-name='Path 12' d='M0 6.83v41.1h6.81l.02-41.11Z' fill='%23161b4b'/%3E%3Cpath data-name='Path 13' d='M19.61 30.68v10.78H12.8V23.88Z' fill='%23161b4b'/%3E%3Cpath data-name='Path 14' d='M0 60.56v6.82h56.33l-6.83-6.82Z' fill='%23ea5e26'/%3E%3Cpath data-name='Path 15' d='m12.8 23.88 43.53 43.5 2.81-6.8-39.53-39.55Z' fill='%23fca01f'/%3E%3Cpath data-name='Path 16' d='M36.97 0H6.83L0 6.83l6.81-.02h30.13a17.35 17.35 0 0 1 .04 34.7l-24.18-.05 6.82 6.82 17.36.05A24.16 24.16 0 0 0 36.98 0' fill='%237c0e6f'/%3E%3C/g%3E%3C/svg%3E"); width: 61px; height: auto; aspect-ratio: 61 / 67.37; margin-left: auto; margin-right: auto; margin-top: 2rem; } .project-grid__item--ad-spacer { display: none; } .project-grid__item i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='271.33' height='271'%3E%3Cg data-name='Group 176'%3E%3Cpath data-name='Rectangle 103' fill='%23161b4b' d='M251.33 16h20v28h-20z'/%3E%3Cpath data-name='Rectangle 98' fill='%23ea5e26' d='M42.33 250v20H15.12v-20z'/%3E%3Cpath data-name='Path 286' d='m4.27 250.84 10.45 19L271.01 15.9l-16.52-9.37Z' fill='%23fca01f'/%3E%3C/g%3E%3C/svg%3E"); aspect-ratio: 271.33 / 271; width: 35%; height: auto; display: block; position: absolute; top: 0; left: 0; z-index: 9; pointer-events: none; background-size: contain; background-repeat: no-repeat; transform: translate(-15%, -16%); opacity: 0; transition: opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1); } @media (max-width: 767px) { .project-grid__item i { display: none; } } .project-grid__item:nth-child(even) i { left: auto; right: 0; transform: translate(15%, -16%) scaleX(-1); } .project-grid__item:hover i { opacity: 1; } .project-grid__cta { margin-top: 6rem; } .project-grid-filter { font-size: 1.3rem; } .project-grid-filter__items { justify-content: flex-start; gap: 2rem; flex-direction: column; } @media (min-width: 768px) { .project-grid-filter__items { flex-direction: row; } } .project-grid-filter__items a { opacity: 0.5; text-underline-offset: 12px; display: none; } @media (min-width: 768px) { .project-grid-filter__items a { display: block; } } .project-grid-filter__items a.is-active { opacity: 1; text-decoration: underline; } .project-grid-filter__items a:hover { opacity: 1; } @media (min-width: 992px) and (max-width: 1200px) { .project-grid-filter__items a[data-term="all"] span { display: none; } } .project-grid-filter + .project-grid { padding-top: 5px; } .project-grid-filter select { display: block; border-color: var(--brand--body-bg-color); border-radius: 5px; } @media (min-width: 768px) { .project-grid-filter select { display: none; } } .project-images--2 .project-images__items { gap: 1rem; } .project-images--2 .project-images__item { aspect-ratio: 865 / 625; width: calc( 50% - 1rem * 0.5); } .project-images--2 .project-images__item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .project-images--offset { margin-top: 7rem; margin-bottom: 7rem; } @media (max-width: 767px) { .project-images--offset { display: none; } } .project-images--offset .project-images__item:nth-child(1) { transform: translateY(-2rem); } .project-images--offset .project-images__item:nth-child(2) { transform: translateY(2rem); } .project-images--3 .project-images__items { gap: 1rem; flex-direction: column; } @media (min-width: 992px) { .project-images--3 .project-images__items { flex-direction: row; } } .project-images--3 .project-images__item { aspect-ratio: 865 / 625; width: 100%; height: auto; overflow: hidden; } @media (min-width: 992px) { .project-images--3 .project-images__item { align-self: stretch; } } .project-images--3 .project-images__item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (min-width: 992px) { .project-images--3 .project-images__item:nth-child(1) { width: calc( 50% - 1rem * 1 / 2); flex: none; } } .project-images--3 .project-images__item:nth-child(2), .project-images--3 .project-images__item:nth-child(3) { width: 100%; } @media (min-width: 992px) { .project-images--3 .project-images__item:nth-child(2), .project-images--3 .project-images__item:nth-child(3) { aspect-ratio: unset; } } .project-images--grid .project-images__items { flex-wrap: wrap; } .project-images--grid .project-images__item { aspect-ratio: 865 / 625; width: calc( 50% - 1rem * 1 / 2); } .project-images--grid .project-images__item img { aspect-ratio: 865 / 625; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .project-intro { --gap: 2rem; } @media (min-width: 992px) { .project-intro { --gap: 3rem; } } @media (min-width: 1264px) { .project-intro { --gap: 4rem; } } .project-intro .wrapper { gap: var(--gap); flex-direction: column; } @media (min-width: 992px) { .project-intro .wrapper { flex-direction: row; } } @media (min-width: 992px) { .project-intro__text { width: calc( 60% - var(--gap) * 0.4); } } @media (min-width: 992px) { .project-intro__image { width: calc( 40% - var(--gap) * 0.6); align-self: stretch; } } @media (min-width: 1200px) { .project-intro__image { margin-top: -12rem; } } .project-intro__image img { aspect-ratio: 1; width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; } @media (min-width: 992px) { .project-intro__image img { aspect-ratio: 600 / 900; max-width: 600px; height: 100%; } } @media (min-width: 1200px) { .project-intro__image img { width: 600px; height: auto; } } .project-intro__tag { margin-bottom: 1rem; } .project-intro__tag .text--tag { font-size: 1.3rem; } .site-footer .upper .wrapper { flex-direction: column; } @media (min-width: 768px) { .site-footer .upper .wrapper { flex-direction: row; align-items: flex-start; } } @media (min-width: 1264px) { .site-footer .upper .wrapper { align-items: center; } } .site-footer .upper .logo { width: 225px; } @media (min-width: 1264px) { .site-footer .upper .logo { width: 340px; } } .site-footer .upper .accred { width: 150px; } @media (min-width: 1264px) { .site-footer .upper .accred { width: 200px; } } @media (max-width: 768px) { .site-footer .upper .accred { margin: 1rem 0 1rem 0; } } .site-footer .upper .links { gap: 0; margin-bottom: 2rem; font-size: 1.4rem; align-items: flex-start; } @media (min-width: 768px) { .site-footer .upper .links { align-items: flex-end; } .site-footer .upper .links a[href^="mailto"]:hover:before { content: 'email: '; color: white; } .site-footer .upper .links a[href^="tel"]:hover:before { content: 'phone: '; color: white; } .site-footer .upper .links a[href^="https://what3words.com"]:before { content: '///'; color: var(--brand--body-text-color); } .site-footer .upper .links a[href^="https://what3words.com"]:hover:before { content: 'find us: '; color: white; } } .site-footer .upper .list--social-links { justify-content: flex-start; } @media (min-width: 768px) { .site-footer .upper .list--social-links { justify-content: flex-end; } } .site-footer .upper .list--social-links a i { transition: background-color 150ms cubic-bezier(0.215, 0.61, 0.355, 1); } .site-footer .upper .list--social-links a:hover i { background-color: white; } .site-footer .lower .wrapper { height: 100px; justify-content: flex-start; } @media (min-width: 768px) { .site-footer .lower .wrapper { justify-content: center; } } .site-footer .lower a { color: #787773; position: relative; } .site-footer .lower a:after { opacity: 0.7; content: ''; display: block; background-color: #787773; position: absolute; height: 1px; width: 100%; bottom: 1px; left: 0; transform: scaleX(0); transform-origin: 0 50%; transition: transform 350ms cubic-bezier(0.215, 0.61, 0.355, 1); } .site-footer .lower.current-menu-item a:after, .site-footer .lower a:hover:after { transform: scaleX(1); } .site-header { z-index: 999; } .site-header .wrapper { height: 120px; gap: 3rem; } @media (min-width: 576px) { .site-header .wrapper { height: 150px; } } @media (min-width: 1264px) { .site-header .wrapper { height: 225px; } } .site-header .logo { width: 225px; } @media (min-width: 1264px) { .site-header .logo { width: 340px; } } .site-header .logo a * { transition: fill 450ms cubic-bezier(0.215, 0.61, 0.355, 1); } .site-header .logo a:hover * { fill: white; } .site-header--invert .logo a * { fill: white; } .site-header--invert .primary-navigation li a { color: white; } .site-header--invert .primary-navigation li a:after { background-color: white; } .site-header--invert .hamburger rect { fill: white; } .site-intro .wrapper { flex-direction: column; } @media (min-width: 992px) { .site-intro .wrapper { flex-direction: row; } } @media (min-width: 992px) { .site-intro__text, .site-intro__stats { width: calc( 50% - 1rem * 0.5); } } .site-intro__stats ul { list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: flex-start; max-width: 422px; margin-left: auto; margin-right: auto; gap: 0 2rem; } @media (min-width: 768px) { .site-intro__stats ul { justify-content: center; } } .site-intro__stats ul li { display: flex; flex-direction: column; border-bottom: 1px solid #787773; width: 195px; padding-top: 1.5rem; padding-bottom: 1.5rem; font-weight: 600; line-height: 1.3; } .site-intro__stats ul li a { display: flex; flex-direction: column; transition: color 150ms cubic-bezier(0.215, 0.61, 0.355, 1); } .site-intro__stats ul li a:hover { color: white; } .site-intro__stats ul li em { font-size: 3.2rem; font-style: normal; } .site-intro__stats ul li:last-child { color: var(--brand--tertiary-color); } .team-cta { background-image: linear-gradient(to bottom, #383836, #787773); color: white; } .team-cta .wrapper { gap: 3rem; flex-direction: column; } @media (min-width: 992px) { .team-cta .wrapper { flex-direction: row; } } @media (min-width: 992px) { .team-cta__text { width: calc( 40% - 3rem * 0.6); } } .team-cta__items { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; margin-bottom: -4rem; max-width: 820px; } @media (min-width: 992px) { .team-cta__items { width: calc( 60% - 3rem * 0.4); margin-bottom: 0; } } @media (min-width: 1264px) { .team-cta__items { transform: translateY(7rem); } } .team-cta__item { position: relative; aspect-ratio: 1; } .team-cta__item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .team-cta__item:nth-child(1):after { background-color: var(--brand--tertiary-color); } .team-cta__item:nth-child(2):after { background-color: var(--brand--yellow); } .team-cta__item:nth-child(3):after { background-color: var(--brand--orange); } .team-cta__item:nth-child(4):after { background-color: var(--brand--body-bg-color); } .team-cta__cta { margin-top: 3rem; } .team-cta__cta a:hover { color: var(--brand--orange); } .team-cta__cta a:hover i { background-color: var(--brand--orange); } .team-grid { background-image: linear-gradient(to bottom, #383836, #787773); color: white; } @media (max-width: 575px) { .team-grid.section--inner { padding-top: 1.5rem; } } .team-grid__items { gap: 2rem 1rem; flex-wrap: wrap; } @media (min-width: 576px) { .team-grid__items { gap: 3rem 1rem; } } @media (min-width: 768px) { .team-grid__items { gap: 5rem 1rem; } } @media (max-width: 575px) { .team-grid__item { gap: 0.5rem; } } @media (min-width: 768px) { .team-grid__item { width: calc( 50% - 1rem * 1 / 2); flex: none; } } @media (min-width: 992px) { .team-grid__item { width: calc( 25% - 1rem * 3 / 4); flex: none; } } .team-grid__item-image { aspect-ratio: 1; width: 100%; height: auto; background-color: #787773; cursor: pointer; } .team-grid__item-image[data-bio=""] { pointer-events: none; cursor: default; } .team-grid__item-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .team-grid__item-text { margin-top: 1rem; position: relative; width: 100%; padding-right: calc( 50px + 0.5rem); line-height: 1; gap: 0.5rem; } .team-grid__item-social { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .team-grid__item-social i { width: 50px; background-color: white; transition: background-color 150ms cubic-bezier(0.215, 0.61, 0.355, 1); } .team-grid__item-social a:hover i { background-color: var(--brand--orange); } .team-grid__item-name { font-size: 1.6rem; font-weight: 500; } .the-drawing-room-process { background-color: #787773; color: white; } .the-drawing-room-process.section--inner { padding-top: 5rem; } @media (min-width: 768px) { .the-drawing-room-process.section--inner { padding-top: 9rem; } } .the-drawing-room-process .logo { display: block; aspect-ratio: 61 / 67.37; width: 61px; height: auto; margin-left: auto; margin-right: auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='61' height='67.37'%3E%3Cg data-name='Group 160' fill='%23dedcd5'%3E%3Cpath data-name='Path 12' d='M0 6.83v41.1h6.81l.02-41.11Z'/%3E%3Cpath data-name='Path 13' d='M19.61 30.68v10.78H12.8V23.88Z'/%3E%3Cpath data-name='Path 14' d='M0 60.56v6.82h56.33l-6.83-6.82Z'/%3E%3Cpath data-name='Path 15' d='m12.8 23.88 43.53 43.5 2.81-6.8-39.53-39.55Z'/%3E%3Cpath data-name='Path 16' d='M36.97 0H6.83L0 6.83l6.81-.02h30.13a17.35 17.35 0 0 1 .04 34.7l-24.18-.05 6.82 6.82 17.36.05A24.16 24.16 0 0 0 36.98 0'/%3E%3C/g%3E%3C/svg%3E"); margin-bottom: 1.5rem; } .the-drawing-room-process__heading { font-size: 2.3rem; font-weight: 600; max-width: 380px; margin-left: auto; margin-right: auto; line-height: 1.1; } @media (min-width: 768px) { .the-drawing-room-process__heading { font-size: 2.3rem; max-width: none; } } .the-drawing-room-process .process { margin-top: 2rem; margin-bottom: 2rem; max-width: 1180px; margin-left: auto; margin-right: auto; position: relative; } .the-drawing-room-process .process__items { padding-top: 4rem; } .the-drawing-room-process .process__item { width: 50%; position: relative; padding-bottom: 5rem; } @media (max-width: 991px) { .the-drawing-room-process .process__item { width: calc( 100% - 2rem); margin-left: 2rem; } } .the-drawing-room-process .process__item i { display: block; top: 0.55rem; right: 0; width: 50px; height: 50px; border: 2px solid white; position: absolute; border-radius: 50%; background-color: #787773; transform: translate(50%, -50%); z-index: 1; } @media (max-width: 991px) { .the-drawing-room-process .process__item i { right: auto; left: 0; transform: translate(-50%, -50%); } } .the-drawing-room-process .process__item:before { content: ''; display: block; top: 0.55rem; left: 0; height: 2px; width: 100%; background-color: white; position: absolute; transform: scaleX(0.5); transform: scaleX(1); transform-origin: 100% 50%; } .the-drawing-room-process .process__item:after { content: ''; display: block; top: 0.55rem; right: 0; height: 100%; width: 2px; background-color: white; position: absolute; transform: scaleY(0.5); transform: scaleY(0); transform-origin: 50% 0; } @media (max-width: 991px) { .the-drawing-room-process .process__item:after { right: auto; left: -1px; } } .the-drawing-room-process .process__item .pad { padding-right: 4rem; } @media (max-width: 991px) { .the-drawing-room-process .process__item .pad { padding-left: 4rem; padding-right: 0; } } .the-drawing-room-process .process__item-heading { font-size: 1.5rem; font-weight: 600; transform: translateY(-0.3rem); } .the-drawing-room-process .process__item-heading span { position: relative; } @media (max-width: 991px) { .the-drawing-room-process .process__item-heading span { position: static; } } .the-drawing-room-process .process__item-heading span:before { content: ''; display: block; position: absolute; top: 0; left: 0; background-color: #787773; width: calc( 100% + 1rem); height: 100%; z-index: -1; } @media (max-width: 991px) { .the-drawing-room-process .process__item-heading span:before { left: -0.5rem; width: calc( 100% + 0.5rem); } } .the-drawing-room-process .process__item-content { margin-top: 1.7rem; font-size: 1.3rem; } .the-drawing-room-process .process__item-content ul li { list-style-type: none; position: relative; } .the-drawing-room-process .process__item-content ul li:before { content: ''; display: block; background-color: #DEDCD5; opacity: 0.5; aspect-ratio: 1; width: 0.7rem; height: auto; border-radius: 50%; position: absolute; top: 0.75rem; left: -1.5rem; z-index: 9; } .the-drawing-room-process .process__item:nth-child( even ) { margin-left: auto; } @media (max-width: 991px) { .the-drawing-room-process .process__item:nth-child( even ) { margin-left: 2rem; } } .the-drawing-room-process .process__item:nth-child( even ) i { left: 0; right: auto; transform: translate(-50%, -50%); } .the-drawing-room-process .process__item:nth-child( even ):before { transform-origin: 0 50%; } @media (min-width: 992px) { .the-drawing-room-process .process__item:nth-child( even ):before { width: 15%; } } .the-drawing-room-process .process__item:nth-child( even ):after { right: auto; left: -1px; } .the-drawing-room-process .process__item:nth-child( even ) .pad { padding-left: 4rem; padding-right: 0; } .the-drawing-room-process .process__item:nth-child( even ) .process__item-heading span { position: static; } .the-drawing-room-process .process__item:nth-child( even ) .process__item-heading span:before { left: -0.5rem; width: calc( 100% + 0.5rem); } .the-drawing-room-process__cta { margin-top: 3rem; } @media (min-width: 992px) { .the-drawing-room-process__cta { margin-top: 4rem; text-align: center; } } .the-drawing-room-process__cta a { display: inline-flex; font-size: 1.5rem; } .the-drawing-room-process__cta a:hover { color: var(--brand--yellow); } .the-drawing-room-process__cta a:hover i { background-color: var(--brand--yellow); } .the-drawing-room-process .process__item { transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); transition-delay: 0s; } .the-drawing-room-process .process__item:not(.animate-in) { opacity: 0; } .the-drawing-room-process .process__item i { transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition-delay: 0.15s; transition-delay: 0.1s; transition-delay: 0.75s; transform: translate(-50%, -50%) scale(0); } @media (min-width: 992px) { .the-drawing-room-process .process__item i { transform: translate(50%, -50%) scale(0); transition-delay: 0.75s; } } .the-drawing-room-process .process__item:before { transform: scaleX(0); transition: all 10s cubic-bezier(0.19, 1, 0.22, 1); transition: all 4s cubic-bezier(0.19, 1, 0.22, 1); transition-delay: 0.25s; transition-delay: 0.1s; transition-delay: 1s; } @media (max-width: 991px) { .the-drawing-room-process .process__item:before { transform-origin: 0 50%; width: 12%; width: 15%; } } .the-drawing-room-process .process__item-heading span, .the-drawing-room-process .process__item-content { opacity: 0; transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1); transition-delay: 0.75s; transition-delay: 0.5s; transition-delay: 1s; } .the-drawing-room-process .process__item.animate-in { opacity: 1; } .the-drawing-room-process .process__item.animate-in i { transform: translate(-50%, -50%) scale(1); } @media (min-width: 992px) { .the-drawing-room-process .process__item.animate-in i { transform: translate(50%, -50%) scale(1); } } .the-drawing-room-process .process__item.animate-in:before { transform: scaleX(1); } .the-drawing-room-process .process__item.animate-in .process__item-heading span, .the-drawing-room-process .process__item.animate-in .process__item-content { opacity: 1; } .the-drawing-room-process .process__item:after { transform: scaleY(0); transition: all 10s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1); } .the-drawing-room-process .process__item.connect:after { transform: scaleY(1); } .the-drawing-room-process .process__item:nth-child(even) i { transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition-delay: 0.75s; } @media (min-width: 992px) { .the-drawing-room-process .process__item:nth-child(even) i { transform: translate(-50%, -50%) scale(0); } } @media (min-width: 992px) { .the-drawing-room-process .process__item:nth-child(even).animate-in i { transform: translate(-50%, -50%) scale(1); } } .the-drawing-room-process .process__item:nth-child(1) i { transition-delay: 0s; } .the-drawing-room-process .process__item:nth-child(1):before { transition-delay: 0s; } *[class^="heading--"] { margin-bottom: 2rem; line-height: 1.1; font-weight: 500; } .heading--site-intro { font-family: var(--brand--heading-font); font-size: 3.1rem; font-weight: 400; } @media (min-width: 768px) { .heading--site-intro { font-size: 4.2rem; } } .heading--page-heading { font-family: var(--brand--heading-font); font-size: 2.4rem; font-weight: 400; } @media (min-width: 768px) { .heading--page-heading { font-size: 3.1rem; } } @media (min-width: 992px) { .heading--page-heading { font-size: 4.2rem; } } .heading--section { font-family: var(--brand--heading-font); font-size: 2.1rem; font-weight: 500; } @media (min-width: 768px) { .heading--section { font-size: 2.4rem; } } .heading--news-item { margin-bottom: 0; font-size: 1.5rem; font-weight: 400; line-height: 1.3; } .text--cta { font-size: 1.5rem; } .text--tag { color: white; font-size: 2rem; line-height: 1; margin-bottom: 1.5rem; display: inline-block; } @media (min-width: 768px) { .text--tag { margin-bottom: 0.5rem; } } .entry-content { font-size: 1.2rem; } .entry-content h3:not(:first-child) { margin-top: 2.2rem; } :root { --brand--primary-color: #383836; --brand--secondary-color: #DEDCD5; --brand--tertiary-color: #951B81; --brand--orange: #EA5E26; --brand--yellow: #F9B233; --brand--body-bg-color: var(--brand--secondary-color); --brand--body-text-color: var(--brand--primary-color); --brand--heading-font: "brockmann", sans-serif; --brand--body-font: "brockmann", sans-serif; --brand--body-line-height: 1.7; --brand--body-line-height: 1.4; } /* Fonts */ .bw { top: auto !important; bottom: 1rem; color: white; }