:root {
--color-primary: #3e428e;
--color-primary-dark: #30346f;
--color-primary-light: #ececf6;
--color-dark: #1b1b1b;
--color-black: #000000;
--color-white: #ffffff;
--color-neutral-50: #f8f8f8;
--color-neutral-100: #f1f1f1;
--color-neutral-200: #e2e2e2;
--color-neutral-300: #cccccc;
--color-neutral-500: #777777;
--color-neutral-700: #444444;
--color-neutral-900: #222222;
--color-text: var(--color-dark);
--color-background: var(--color-white);
--color-border: var(--color-neutral-200);
--font-primary: "Geologica", Arial, Helvetica, sans-serif;
--font-thin: 100;
--font-extralight: 200;
--font-light: 300;
--font-regular: 400;
--font-size-display-xl: clamp(3.5rem, 7vw, 7rem);
--font-size-display-lg: clamp(3rem, 6vw, 5.5rem);
--font-size-h1: clamp(2.5rem, 5vw, 4.5rem);
--font-size-h2: clamp(2rem, 4vw, 3.5rem);
--font-size-h3: clamp(1.625rem, 3vw, 2.5rem);
--font-size-body-lg: clamp(1.125rem, 1rem + 0.35vw, 1.375rem);
--font-size-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
--font-size-body-sm: clamp(0.875rem, 0.84rem + 0.14vw, 1rem);
--font-size-label: 0.875rem;
--line-height-body: 1.6;
--line-height-heading: 1.15;
--container-max: 1280px;
--container-content: 1140px;
--container-narrow: 960px;
--gutter-mobile: 20px;
--gutter-tablet: 32px;
--gutter-desktop: 48px;
--container-gutter: var(--gutter-mobile);
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--space-9: 6rem;
--space-10: 8rem;
--section-spacing-sm: clamp(3rem, 5vw, 5rem);
--section-spacing: clamp(4rem, 7vw, 7rem);
--section-spacing-lg: clamp(5rem, 9vw, 9rem);
--section-spacing-xl: clamp(6rem, 11vw, 11rem);
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-pill: 999px;
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--z-base: 0;
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
}
@media (min-width: 48rem) {
:root {
--container-gutter: var(--gutter-tablet);
}
}
@media (min-width: 75rem) {
:root {
--container-gutter: var(--gutter-desktop);
}
}
@font-face {
font-family: "Geologica";
src: url('../fonts/geologica/geologica-thin.woff2') format('woff2');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Geologica";
src: url('../fonts/geologica/geologica-extralight.woff2') format('woff2');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Geologica";
src: url('../fonts/geologica/geologica-light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Geologica";
src: url('../fonts/geologica/geologica-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}
ul[role='list'],
ol[role='list'] {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-family: var(--font-primary);
font-size: var(--font-size-body);
font-weight: var(--font-regular);
line-height: var(--line-height-body);
color: var(--color-text);
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-block: 0 0.5em;
font-family: var(--font-primary);
font-weight: var(--font-light);
line-height: var(--line-height-heading);
text-wrap: balance;
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: clamp(1.375rem, 2vw, 1.875rem); }
h5 { font-size: clamp(1.125rem, 1.5vw, 1.5rem); }
h6 { font-size: var(--font-size-body); }
p {
margin-block: 0 1em;
}
a {
color: var(--color-primary);
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-primary-dark);
}
strong {
font-weight: var(--font-regular);
}
small {
font-size: var(--font-size-body-sm);
}
html {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
overflow-x: hidden;
font-family: var(--font-primary);
color: var(--color-dark);
background-color: var(--color-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
main {
display: block;
}
::selection {
color: var(--color-white);
background-color: var(--color-primary);
}
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
}
img {
height: auto;
}
.container,
.container--content,
.container--narrow,
.container--full {
width: 100%;
margin-inline: auto;
padding-inline: var(--container-gutter);
}
.container {
max-width: var(--container-max);
}
.container--content {
max-width: var(--container-content);
}
.container--narrow {
max-width: var(--container-narrow);
}
.container--full {
margin-inline: 0;
max-width: none;
}
.section {
padding-block: var(--section-spacing);
}
.section--sm {
padding-block: var(--section-spacing-sm);
}
.section--lg {
padding-block: var(--section-spacing-lg);
}
.section--xl {
padding-block: var(--section-spacing-xl);
}
.flow > * + * {
margin-block-start: var(--flow-space, var(--space-4));
}
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cluster-gap, var(--space-4));
}
.grid {
display: grid;
gap: var(--grid-gap, var(--space-6));
}
.grid--2,
.grid--3,
.grid--4 {
grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
.grid--2,
.grid--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 3rem;
padding: 0.75rem 1.5rem;
border: 1px solid transparent;
border-radius: var(--radius-pill);
font-weight: var(--font-regular);
line-height: 1;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}
.btn--primary {
color: var(--color-white);
background-color: var(--color-primary);
}
.btn--primary:hover {
color: var(--color-white);
background-color: var(--color-primary-dark);
}
.btn--dark {
color: var(--color-white);
background-color: var(--color-dark);
}
.btn--dark:hover {
color: var(--color-white);
background-color: var(--color-black);
}
.btn--light {
color: var(--color-dark);
background-color: var(--color-white);
border-color: var(--color-border);
}
.btn--light:hover {
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--text {
min-height: 0;
padding: 0;
color: var(--color-primary);
background: transparent;
border-radius: 0;
}
.btn--text:hover {
color: var(--color-primary-dark);
}
label {
display: inline-block;
margin-block-end: var(--space-2);
font-weight: var(--font-regular);
}
input,
textarea,
select {
width: 100%;
padding: 0.75rem 1rem;
color: var(--color-text);
background-color: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
textarea {
min-height: 8rem;
resize: vertical;
}
select {
appearance: none;
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
button {
color: inherit;
cursor: pointer;
}
button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.site-header {
position: relative;
z-index: var(--z-sticky);
height: 113px;
background-color: var(--color-white);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.site-header__branding,
.site-header__logo-link,
.custom-logo-link {
display: flex;
align-items: center;
flex: 0 0 auto;
}
.site-header__logo,
.site-header .custom-logo {
width: 56px;
height: 73px;
object-fit: contain;
}
.site-navigation {
display: flex;
align-items: center;
margin-left: auto;
}
.site-navigation__panel {
display: flex;
align-items: center;
gap: 30px;
}
.site-navigation__menu {
display: flex;
align-items: center;
gap: 30px;
margin: 0;
padding: 0;
list-style: none;
}
.site-navigation__menu a,
.site-navigation__language,
.site-language-switcher__toggle,
.site-language-switcher__link {
font-family: var(--font-primary);
font-size: 21px;
font-weight: var(--font-thin);
line-height: 1.2;
color: var(--color-black);
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
.site-navigation__menu a {
position: relative;
display: block;
padding-block: var(--space-2);
}
.site-navigation__menu a::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
background-color: currentColor;
content: '';
transform: scaleX(0);
transform-origin: right;
transition: transform var(--transition-fast);
}
.site-navigation__menu a:hover,
.site-navigation__menu a:focus-visible,
.site-navigation__menu .current-menu-item > a,
.site-navigation__menu .current_page_item > a {
color: var(--color-primary);
}
.site-navigation__menu a:hover::after,
.site-navigation__menu a:focus-visible::after,
.site-navigation__menu .current-menu-item > a::after,
.site-navigation__menu .current_page_item > a::after {
transform: scaleX(1);
transform-origin: left;
}
.site-navigation__language {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.site-language-switcher {
position: relative;
display: inline-flex;
align-items: center;
}
.site-language-switcher__toggle {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
}
.site-language-switcher__menu {
position: absolute;
z-index: var(--z-dropdown);
top: 100%;
right: 0;
min-width: 100%;
margin: 0;
padding: var(--space-1) 0;
list-style: none;
background-color: var(--color-white);
}
.site-language-switcher__menu[hidden] {
display: none;
}
.site-language-switcher__link {
display: block;
padding-block: var(--space-1);
text-align: center;
}
.site-language-switcher__link:hover,
.site-language-switcher__link:focus-visible {
color: var(--color-primary);
}
.site-navigation__toggle {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
background: transparent;
border: 0;
}
.site-navigation__toggle-icon {
display: grid;
gap: 5px;
width: 24px;
}
.site-navigation__toggle-icon span {
display: block;
height: 1px;
background-color: var(--color-black);
transition: transform var(--transition-fast), opacity var(--transition-fast);
}
@media (max-width: 63.9375rem) {
.site-header {
height: 88px;
}
.site-header__logo,
.site-header .custom-logo {
width: 43px;
height: 56px;
}
.site-navigation__toggle {
display: inline-flex;
}
.site-navigation__panel {
position: absolute;
top: 100%;
right: 0;
left: 0;
display: none;
align-items: flex-start;
padding: var(--space-6) var(--container-gutter);
background-color: var(--color-white);
}
.site-navigation.is-open .site-navigation__panel {
display: flex;
}
.site-navigation__menu {
flex: 1 1 auto;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.site-navigation__menu a,
.site-navigation__language,
.site-language-switcher__toggle,
.site-language-switcher__link {
font-size: 18px;
}
.site-navigation.is-open .site-navigation__toggle-icon span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.site-navigation.is-open .site-navigation__toggle-icon span:nth-child(2) {
opacity: 0;
}
.site-navigation.is-open .site-navigation__toggle-icon span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
}
@media (prefers-reduced-motion: reduce) {
.site-navigation__menu a::after,
.site-navigation__toggle-icon span {
transition-duration: 0s;
}
}
.site-footer {
height: 305px;
min-height: 305px;
color: var(--color-white);
background-color: var(--color-primary);
}
.site-footer__inner {
display: grid;
grid-template-columns: 145px 205px minmax(260px, 1fr) 190px;
grid-template-rows: 1fr auto;
column-gap: clamp(3rem, 8.5vw, 109px);
width: 100%;
max-width: 1280px;
min-height: 305px;
margin-inline: auto;
padding: 54px 32px 47px 58px;
}
.site-footer a {
color: inherit;
text-decoration: none;
}
.site-footer__brand {
grid-column: 1;
grid-row: 1 / span 2;
align-self: start;
width: 145px;
height: 189px;
}
.site-footer__brand img {
display: block;
width: 100%;
height: 100%;
}
.site-footer__nav {
grid-column: 2;
grid-row: 1 / span 2;
align-self: start;
margin-top: 4px;
}
.site-footer__menu {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__menu a,
.site-footer__contact a,
.site-footer__social a {
display: inline-block;
font-weight: var(--font-thin);
transition: font-weight var(--transition-base);
}
.site-footer__menu a:hover,
.site-footer__menu a:focus-visible,
.site-footer__contact a:hover,
.site-footer__contact a:focus-visible,
.site-footer__social a:hover,
.site-footer__social a:focus-visible,
.site-footer__meta a:hover,
.site-footer__meta a:focus-visible {
font-weight: var(--font-light);
}
.site-footer__menu,
.site-footer__contact,
.site-footer__social {
font-family: var(--font-primary);
font-size: 20px;
font-weight: var(--font-thin);
font-style: normal;
line-height: 1;
text-transform: uppercase;
}
.site-footer__contact {
grid-column: 3;
grid-row: 1 / span 2;
display: flex;
flex-direction: column;
justify-content: space-between;
align-self: stretch;
margin: 4px 0 0;
padding-bottom: 10px;
}
.site-footer__contact-primary,
.site-footer__address,
.site-footer__social {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.site-footer__address span {
display: block;
}
.site-footer__social {
grid-column: 4;
grid-row: 1;
align-items: flex-end;
text-align: right;
}
.site-footer__meta {
grid-column: 4;
grid-row: 2;
align-self: end;
font-size: 16.084px;
font-weight: var(--font-thin);
line-height: 1;
text-align: right;
}
.site-footer__meta p {
margin: 0;
}
.site-footer__meta p + p {
margin-top: 13px;
}
.site-footer__meta span,
.site-footer__meta a {
font-family: var(--font-primary);
font-weight: var(--font-thin);
}
@media (max-width: 70rem) {
.site-footer {
height: auto;
}
.site-footer__inner {
grid-template-columns: 145px minmax(180px, 1fr) minmax(250px, 1.5fr);
grid-template-rows: auto auto;
gap: var(--space-8);
padding-inline: var(--container-gutter);
}
.site-footer__brand {
grid-column: 1;
grid-row: 1 / span 2;
}
.site-footer__nav {
grid-column: 2;
grid-row: 1 / span 2;
}
.site-footer__contact {
grid-column: 3;
grid-row: 1;
gap: var(--space-8);
padding-bottom: 0;
}
.site-footer__social,
.site-footer__meta {
grid-column: 3;
grid-row: 2;
align-self: end;
}
.site-footer__social {
align-items: flex-start;
text-align: left;
}
.site-footer__meta {
justify-self: end;
text-align: right;
}
}
@media (max-width: 48rem) {
.site-footer__inner {
grid-template-columns: 145px 1fr;
grid-template-rows: auto;
padding-block: var(--space-8);
}
.site-footer__brand,
.site-footer__nav,
.site-footer__contact,
.site-footer__social,
.site-footer__meta {
grid-row: auto;
}
.site-footer__brand {
grid-column: 1;
}
.site-footer__nav,
.site-footer__contact,
.site-footer__social,
.site-footer__meta {
grid-column: 2;
}
.site-footer__social,
.site-footer__meta {
justify-self: start;
align-items: flex-start;
text-align: left;
}
}
@media (max-width: 35rem) {
.site-footer__inner {
display: flex;
flex-direction: column;
gap: var(--space-8);
min-height: 0;
padding: var(--space-8) var(--gutter-mobile);
}
.site-footer__brand {
flex: 0 0 auto;
}
.site-footer__nav,
.site-footer__contact,
.site-footer__social,
.site-footer__meta {
width: 100%;
margin: 0;
}
.site-footer__contact {
gap: var(--space-7);
}
}
.home-contact { position: relative; min-height: 983px; overflow: hidden; color: var(--color-black); background: var(--color-white); }
.home-contact__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-height: 983px; padding-top: 6.5rem; }
.home-contact__title { margin: 0; font-size: clamp(2.5rem, 3.90625vw, 3.125rem); font-weight: var(--font-thin); line-height: 1; color: var(--color-black); text-align: center; }
.home-contact__intro { width: min(100%, 47.1875rem); margin: 2.8125rem 0 0; font-size: 1.5625rem; font-weight: var(--font-thin); line-height: 1.2; text-align: center; }
.home-contact__form-wrap { position: relative; width: min(100%, 37.75rem); height: 27.875rem; margin-top: 4rem; }
.home-contact-form, .home-contact-form__success { position: absolute; inset: 0; transition: opacity 300ms ease-in; }
.home-contact-form.is-leaving { opacity: 0; pointer-events: none; }
.home-contact-form > .home-contact-form__field > p, .home-contact-form > .home-contact-form__actions > p { display: contents; margin: 0; padding: 0; }
.home-contact-form__field { position: relative; display: flex; align-items: center; height: 2.9375rem; border-bottom: 1px solid var(--color-dark); font-size: 1.5625rem; font-weight: var(--font-thin); line-height: 1; transition: border-color var(--transition-fast); }
.home-contact-form__field:focus-within { border-color: var(--color-primary); }
.home-contact-form__field label { flex: 0 0 auto; margin: 0; font-weight: var(--font-thin); white-space: nowrap; }
.home-contact-form__field .wpcf7-form-control-wrap { display: block; flex: 1; min-width: 0; height: 100%; }
.home-contact-form__field input, .home-contact-form__field textarea { min-width: 0; margin: 0; padding: 0 0 0 var(--space-3); border: 0; border-radius: 0; outline: 0; font: inherit; font-weight: var(--font-thin); line-height: inherit; color: var(--color-black); background: transparent; box-shadow: none; }
.home-contact-form__field input:focus, .home-contact-form__field textarea:focus { border-color: transparent; box-shadow: none; }
.home-contact-form__field input { width: 100%; height: 100%; }
.home-contact-form__field--message { align-items: stretch; flex-direction: column; height: 10.4375rem; padding-top: .5625rem; }
.home-contact-form__field--message .wpcf7-form-control-wrap { width: 100%; }
.home-contact-form__field--message textarea { width: 100%; height: 100%; padding: var(--space-3) 0; resize: none; }
.home-contact-form__actions { position: absolute; top: 24.4375rem; right: 0; left: 0; display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--space-4); }
.home-contact-form__status { max-width: 25rem; margin: 0; font-size: .875rem; font-weight: var(--font-regular); line-height: 1.3; color: #a00000; }
.home-contact-form__submit { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 9.5625rem; height: 2.0625rem; padding: .25rem 1rem; border: 0; font-size: 1.516875rem; font-weight: var(--font-thin); line-height: 1; color: var(--color-white); background: var(--color-black); cursor: pointer; transition: background-color var(--transition-fast), opacity var(--transition-fast); }
.home-contact-form__submit:hover, .home-contact-form__submit:focus-visible { color: var(--color-white); background: var(--color-primary); }
.home-contact-form.submitting .home-contact-form__submit { opacity: .6; cursor: wait; }
.home-contact-form .wpcf7-spinner { position: absolute; top: .25rem; right: 10.5rem; margin: 0; }
.home-contact-form .wpcf7-not-valid-tip { position: absolute; right: 0; bottom: .125rem; font-size: .6875rem; font-weight: var(--font-regular); line-height: 1; }
.home-contact-form .wpcf7-response-output { position: absolute; top: 24.4375rem; right: 11rem; left: 0; max-width: 25rem; margin: 0; padding: 0; border: 0; font-size: .875rem; font-weight: var(--font-regular); line-height: 1.3; color: #a00000; }
.home-contact-form__success { padding-top: .875rem; font-size: 1.83475rem; font-weight: var(--font-thin); line-height: 1; opacity: 0; }
.home-contact-form__success.is-active { opacity: 1; }
.home-contact-form__success p { margin: 0; }
.home-contact-form__success p + p { margin-top: 1.83475rem; }
.contact-page form.home-contact-form .home-contact-form__field--message { height: 158.16px; }
.home-contact__details { display: flex; align-items: center; justify-content: center; width: min(100%, 61.1875rem); margin-top: 4rem; font-size: 1.4851875rem; font-style: normal; font-weight: var(--font-thin); line-height: 1; text-align: center; text-transform: uppercase; white-space: nowrap; }
.home-contact__details a { color: inherit; text-decoration: none; }
.home-contact__details a:hover, .home-contact__details a:focus-visible { color: var(--color-primary); }
.home-contact__separator { margin-inline: 1.5rem; }
.home-contact__decoration { position: absolute; top: 931px; left: 50%; display: grid; grid-template-columns: repeat(3, 1fr); width: 100vw; height: 20.4660625rem; transform: translateX(-50%); }
.home-contact__decoration-item { display: flex; align-items: center; justify-content: center; height: 20.4660625rem; }
.home-contact__decoration-item img { flex: 0 0 auto; width: 20.4660625rem; height: 26.675625rem; max-width: none; transform: rotate(-90deg) scaleY(-1); }
@media (max-width: 63.9375rem) {
.home-contact { min-height: auto; }
.home-contact__inner { min-height: auto; padding-top: var(--space-9); padding-bottom: 7rem; }
.home-contact__intro { margin-top: var(--space-6); }
.home-contact__intro br { display: none; }
.home-contact__form-wrap { margin-top: var(--space-8); }
.home-contact__details { flex-direction: column; gap: var(--space-3); margin-top: var(--space-8); font-size: clamp(1rem, 3vw, 1.25rem); white-space: normal; }
.home-contact__separator { display: none; }
.home-contact__decoration { top: auto; bottom: -17.2160625rem; }
}
@media (max-width: 35rem) {
.home-contact__title { font-size: clamp(2rem, 10vw, 2.5rem); }
.home-contact__intro { font-size: 1.125rem; line-height: 1.4; }
.home-contact__form-wrap { height: 30rem; }
.home-contact-form__field { font-size: 1.125rem; }
.home-contact-form__field--message { height: 12rem; }
.home-contact-form__actions { top: auto; bottom: 0; flex-direction: column; }
.home-contact-form .wpcf7-response-output { top: auto; right: 0; bottom: 3.5rem; }
.home-contact-form__submit { align-self: stretch; width: 100%; min-height: 2.75rem; }
.home-contact-form__success { font-size: 1.5rem; line-height: 1.1; }
}
@media (prefers-reduced-motion: reduce) { .home-contact-form, .home-contact-form__success { transition: none; } }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.overflow-hidden { overflow: hidden; }
.home-hero {
position: relative;
height: 719px;
min-height: 36rem;
overflow: hidden;
color: var(--color-white);
background-color: var(--color-dark);
}
.home-hero__media,
.home-hero__overlay {
position: absolute;
inset: 0;
}
.home-hero__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.home-hero__overlay {
z-index: 1;
background-color: rgba(0, 0, 0, 0.63);
}
.home-hero__content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(20rem, 26.0625rem);
grid-template-rows: 1fr auto;
column-gap: var(--space-7);
align-items: center;
height: 100%;
padding-top: var(--space-8);
padding-bottom: 3.0625rem;
}
.home-hero__title {
align-self: center;
margin: var(--space-8) 0 0 1.375rem;
font-size: clamp(2.625rem, 3.90625vw, 3.125rem);
font-weight: var(--font-thin);
line-height: 1;
color: var(--color-white);
animation: home-hero-title-enter 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.home-hero__text {
align-self: center;
max-width: 26.0625rem;
margin-top: var(--space-6);
font-size: clamp(1.75rem, 2.734375vw, 2.1875rem);
font-weight: var(--font-thin);
line-height: 1;
text-align: right;
animation: home-hero-text-enter 900ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both;
}
.home-hero__text p {
margin: 0;
}
.home-hero__text p + p {
margin-top: var(--space-6);
}
.home-hero__cta {
grid-column: 1 / -1;
justify-self: center;
}
.home-hero__cta,
.home-cta-strip__link {
display: inline-flex;
align-items: center;
justify-content: center;
width: min(100%, 24rem);
min-height: 2.5rem;
padding: var(--space-2) var(--space-5);
font-family: var(--font-primary);
font-size: clamp(1rem, 1.5625vw, 1.25rem);
font-weight: var(--font-light);
line-height: 1;
color: var(--color-black);
text-align: center;
text-decoration: none;
background-color: var(--color-white);
}
.home-hero__cta:hover,
.home-cta-strip__link:hover {
color: var(--color-primary);
}
.home-intro {
min-height: 1012px;
color: var(--color-primary);
background-color: var(--color-white);
}
.home-intro__inner {
display: flex;
flex-direction: column;
align-items: center;
min-height: inherit;
padding-top: 7.75rem;
padding-bottom: var(--space-9);
text-align: center;
}
.home-intro__mark {
flex: 0 0 auto;
width: clamp(5.5rem, 9.887vw, 7.909625rem);
height: clamp(4.75rem, 8.45vw, 6.7598125rem);
animation: home-intro-mark-rotate 10s linear infinite;
}
.home-intro__mark img {
display: block;
width: 100%;
height: 100%;
}
.home-intro__title {
margin: 5.5rem 0 0;
font-size: clamp(2.5rem, 5.46875vw, 4.375rem);
font-weight: var(--font-extralight);
line-height: 1.0214;
color: var(--color-primary);
}
.home-intro__copy {
width: 100%;
max-width: 63.0625rem;
margin-top: 5.5rem;
}
.home-intro__lead,
.home-intro__description {
font-weight: var(--font-extralight);
color: var(--color-primary);
}
.home-intro__lead {
margin: 0;
font-size: clamp(1.75rem, 3.515625vw, 2.8125rem);
line-height: 1;
}
.home-intro__description {
margin: 4.5rem 0 0;
font-size: clamp(1.25rem, 2.734375vw, 2.1875rem);
line-height: 1.1429;
}
.home-cta-strip {
height: 72px;
background-color: var(--color-primary);
}
.home-cta-strip__inner {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.home-cta-strip__link {
width: min(calc(100% - (2 * var(--gutter-mobile))), 24rem);
height: 2.25rem;
min-height: 2.25rem;
}
.home-owner-profiles {
min-height: 1639px;
color: var(--color-white);
background-color: var(--color-dark);
}
.home-owner-profiles__inner {
display: flex;
flex-direction: column;
align-items: center;
min-height: inherit;
padding-top: 8.8125rem;
padding-bottom: 8.8125rem;
}
.home-owner-profiles__mark {
flex: 0 0 auto;
width: 7.875rem;
height: 6.730125rem;
animation: home-owner-profiles-mark-rotate 10s linear infinite;
}
.home-owner-profiles__mark img {
display: block;
width: 100%;
height: 100%;
}
.home-owner-profiles__title {
margin: 6rem 0 0;
font-size: clamp(2.5rem, 3.90625vw, 3.125rem);
font-weight: var(--font-extralight);
line-height: 1;
color: var(--color-white);
text-align: center;
}
.home-owner-profiles__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: 23.375rem 33.1875rem;
width: min(100%, 67.5625rem);
margin-top: 9.125rem;
}
.home-owner-profiles__question,
.home-owner-profiles__answer {
display: flex;
margin: 0;
}
.home-owner-profiles__question {
align-items: flex-start;
padding: 0.4375rem 7.125rem 0 0;
}
.home-owner-profiles__question--second {
padding-top: 4.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.85);
}
.home-owner-profiles__answer {
align-items: center;
padding-left: 7.75rem;
border-left: 1px solid rgba(255, 255, 255, 0.85);
}
.home-owner-profiles__answer--second {
border-top: 1px solid rgba(255, 255, 255, 0.85);
}
.home-owner-profiles__question p,
.home-owner-profiles__answer p {
margin: 0;
color: var(--color-white);
}
.home-owner-profiles__question p {
font-size: clamp(2.5rem, 3.90625vw, 3.125rem);
font-weight: var(--font-regular);
line-height: 1;
}
.home-owner-profiles__answer p {
font-size: clamp(1.5rem, 2.34375vw, 1.875rem);
font-weight: var(--font-thin);
line-height: 1;
text-align: right;
}
.home-steps {
min-height: 2019px;
color: var(--color-black);
background-color: var(--color-white);
}
.home-steps__inner {
display: flex;
flex-direction: column;
align-items: center;
min-height: inherit;
padding-top: 6.25rem;
padding-bottom: 3.75rem;
}
.home-steps__lines {
position: relative;
flex: 0 0 auto;
width: 100vw;
max-width: 1081px;
height: 61px;
overflow-x: clip;
}
.home-steps__line {
position: absolute;
right: 0;
display: block;
height: 1px;
background-color: var(--color-black);
}
.home-steps__line--short {
top: 0;
width: 127px;
animation: home-steps-line-short 1560ms linear infinite both;
}
.home-steps__line--medium {
top: 30px;
width: 226px;
animation: home-steps-line-medium 1560ms linear infinite both;
}
.home-steps__line--long {
top: 60px;
width: 335px;
animation: home-steps-line-long 1560ms linear infinite both;
}
.home-steps__title {
margin: 3rem 0 0;
font-size: clamp(2.5rem, 3.90625vw, 3.125rem);
font-weight: var(--font-extralight);
line-height: 1;
color: var(--color-black);
text-align: center;
}
.home-steps__list {
display: flex;
flex-direction: column;
width: min(100%, 59.0625rem);
margin: 5rem 0 0;
padding: 0;
list-style: none;
}
.home-step {
display: flex;
min-height: 17.1875rem;
}
.home-step--right {
justify-content: flex-end;
}
.home-step__panel {
position: relative;
display: flex;
width: 50.0529%;
min-height: 17.1875rem;
padding: 1.8125rem 2.4375rem 2.25rem 2.1875rem;
color: var(--color-white);
background-color: var(--color-dark);
transition: width 200ms ease-in, min-height 200ms ease-in, background-color 200ms ease-in;
}
.home-step__number {
position: absolute;
top: 1.8125rem;
left: 2.1875rem;
font-size: 2.5rem;
font-weight: var(--font-light);
line-height: 1;
}
.home-step__content {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-end;
min-width: 0;
}
.home-step__title {
margin: auto 0 0;
font-size: clamp(2rem, 3.125vw, 2.5rem);
font-weight: var(--font-light);
line-height: 1;
color: var(--color-white);
text-align: right;
transition: margin 200ms ease-in;
}
.home-step__description {
max-height: 0;
margin: 0;
overflow: hidden;
font-size: 1.5625rem;
font-weight: var(--font-light);
line-height: 1;
color: var(--color-white);
text-align: right;
opacity: 0;
visibility: hidden;
transition: max-height 200ms ease-in, margin-top 200ms ease-in, opacity 200ms ease-in, visibility 200ms ease-in;
}
@media (hover: hover) and (pointer: fine) {
.home-step__panel:hover,
.home-step__panel:focus,
.home-step__panel:focus-within {
width: 100%;
background-color: var(--color-primary);
}
.home-step:last-child .home-step__panel:hover,
.home-step:last-child .home-step__panel:focus,
.home-step:last-child .home-step__panel:focus-within {
min-height: 22.1875rem;
}
.home-step__panel:hover .home-step__title,
.home-step__panel:focus .home-step__title,
.home-step__panel:focus-within .home-step__title {
margin-top: 0;
}
.home-step__panel:hover .home-step__description,
.home-step__panel:focus .home-step__description,
.home-step__panel:focus-within .home-step__description {
max-height: 15rem;
margin-top: auto;
opacity: 1;
visibility: visible;
}
}
.home-steps__footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.625rem;
margin-top: 4rem;
}
.home-steps__footer-text {
font-size: clamp(1.5rem, 2.34375vw, 1.875rem);
font-weight: var(--font-thin);
line-height: 1.2;
text-align: center;
}
.home-steps__cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 12rem;
min-height: 2.75rem;
padding: 0.375rem 1.5rem;
font-size: clamp(1.25rem, 1.91875vw, 1.535rem);
font-weight: var(--font-thin);
line-height: 1;
color: var(--color-white);
text-decoration: none;
background-color: var(--color-primary);
transition: background-color var(--transition-base), color var(--transition-base);
}
.home-steps__cta:hover {
color: var(--color-white);
background-color: var(--color-primary-dark);
}
.home-testimonials {
min-height: 52rem;
color: var(--color-white);
background-color: var(--color-primary);
}
.home-testimonials__inner {
display: flex;
flex-direction: column;
align-items: center;
min-height: inherit;
padding-top: 5.0625rem;
padding-bottom: 3.375rem;
}
.home-testimonials__title {
margin: 0;
font-size: clamp(3rem, 4.6875vw, 3.75rem);
font-weight: var(--font-thin);
line-height: 1.5924;
color: var(--color-white);
text-align: center;
}
.home-testimonials__stage {
position: relative;
width: min(22.1875rem, calc(100vw - (2 * var(--container-gutter))));
height: 29.0625rem;
margin-top: 3.375rem;
}
.home-testimonial {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
padding: 1.3125rem 1.6875rem;
color: var(--color-black);
background-color: var(--color-white);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 200ms ease-in, visibility 200ms ease-in;
}
.home-testimonial.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.home-testimonial__quote {
margin: 0;
font-size: 1.375rem;
font-weight: var(--font-thin);
line-height: 1;
}
.home-testimonial__quote p {
margin: 0;
}
.home-testimonial__quote p + p {
margin-top: 1.375rem;
}
.home-testimonial__author {
margin-top: auto;
font-size: 1.375rem;
font-weight: var(--font-thin);
line-height: 1;
color: var(--color-primary);
}
.home-testimonial__attribution,
.home-testimonial__name,
.home-testimonial__location {
display: block;
font-style: normal;
}
.home-testimonials__dots {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4375rem;
margin-top: 1rem;
}
.home-testimonials__dot {
display: block;
width: 0.8125rem;
height: 0.8125rem;
padding: 0;
border: 0;
border-radius: 50%;
background-color: var(--color-white);
opacity: 0.4;
cursor: pointer;
transition: opacity 200ms ease-in;
}
.home-testimonials__dot.is-active,
.home-testimonials__dot:hover,
.home-testimonials__dot:focus-visible {
opacity: 1;
}
.home-articles {
min-height: 35rem;
overflow: hidden;
color: var(--color-dark);
background-color: var(--color-white);
}
.home-articles__inner {
padding-top: 4.5rem;
}
.home-articles__header,
.home-articles__viewport {
width: min(calc(100% - (2 * var(--container-gutter))), 70.25rem);
margin-inline: auto;
}
.home-articles__header {
display: flex;
align-items: center;
justify-content: space-between;
height: 3.625rem;
padding-inline: 0;
}
.home-articles__title {
margin: 0;
font-size: clamp(2.5rem, 3.90625vw, 3.125rem);
font-weight: var(--font-thin);
line-height: 1.16;
color: var(--color-dark);
}
.home-articles__view-all {
font-size: 1.25rem;
font-weight: var(--font-thin);
line-height: 1.5;
color: var(--color-dark);
text-align: right;
text-decoration: none;
transition: font-weight var(--transition-base);
}
.home-articles__view-all:hover,
.home-articles__view-all:focus-visible {
font-weight: var(--font-light);
color: var(--color-dark);
}
.home-articles__viewport {
height: 21.25rem;
margin-top: 2.625rem;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.home-articles__viewport::-webkit-scrollbar {
display: none;
}
.home-articles__track {
display: flex;
gap: 1.875rem;
width: max-content;
}
.home-article-card {
flex: 0 0 15rem;
width: 15rem;
height: 21.25rem;
}
.home-article-card__link {
display: block;
height: 100%;
color: var(--color-black);
text-decoration: none;
}
.home-article-card__media {
position: relative;
width: 15rem;
height: 15rem;
overflow: hidden;
background-color: var(--color-neutral-200);
}
.home-article-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1);
}
.home-article-card__overlay {
position: absolute;
inset: 0;
background-color: rgba(62, 66, 142, 0.4);
transition: background-color 300ms ease-out;
}
.home-article-card__hover {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
padding: 0.875rem 1rem 0.8125rem;
color: var(--color-white);
opacity: 0;
transition: opacity 300ms ease-out;
}
.home-article-card__excerpt {
display: -webkit-box;
margin: 0;
overflow: hidden;
font-size: 1.25rem;
font-weight: var(--font-regular);
line-height: 1;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
}
.home-article-card__more {
margin-top: auto;
font-size: 1.0625rem;
font-weight: var(--font-regular);
line-height: 1.1765;
}
.home-article-card__title {
width: 100%;
margin: 1.1875rem 0 0;
font-size: 1.375rem;
font-weight: var(--font-light);
line-height: 0.9545;
color: var(--color-black);
}
.home-article-card__link:hover .home-article-card__overlay,
.home-article-card__link:focus-visible .home-article-card__overlay {
background-color: rgba(62, 66, 142, 0.6);
}
.home-article-card__link:hover .home-article-card__hover,
.home-article-card__link:focus-visible .home-article-card__hover {
opacity: 1;
}
@keyframes home-steps-line-short {
0% {
animation-timing-function: ease-in;
width: 1081px;
}
59.6%,
100% {
width: 127px;
}
}
@keyframes home-steps-line-medium {
0% {
animation-timing-function: ease-in;
width: 1081px;
}
75%,
100% {
width: 226px;
}
}
@keyframes home-steps-line-long {
0% {
animation-timing-function: ease-in;
width: 1081px;
}
92.3%,
100% {
width: 335px;
}
}
@keyframes home-owner-profiles-mark-rotate {
to {
transform: rotate(1turn);
}
}
@keyframes home-intro-mark-rotate {
to {
transform: rotate(1turn);
}
}
@keyframes home-hero-title-enter {
from {
transform: translateY(-200px);
}
to {
transform: translateY(0);
}
}
@keyframes home-hero-text-enter {
0% {
opacity: 0;
transform: translateY(-200px);
}
35%,
100% {
opacity: 1;
}
100% {
transform: translateY(0);
}
}
@media (max-width: 63.9375rem) {
.home-hero {
height: auto;
min-height: calc(100svh - 88px);
}
.home-hero__content {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr;
align-content: center;
gap: var(--space-7);
min-height: inherit;
padding-top: var(--space-8);
padding-bottom: var(--space-7);
}
.home-hero__title {
align-self: end;
margin: 0;
font-size: clamp(2.5rem, 8vw, 3.125rem);
}
.home-hero__text {
max-width: 32rem;
margin: 0 0 0 auto;
font-size: clamp(1.5rem, 5.5vw, 2rem);
}
.home-hero__cta {
grid-column: 1;
align-self: end;
}
.home-intro {
min-height: auto;
}
.home-intro__inner {
padding-top: var(--space-9);
padding-bottom: var(--space-9);
}
.home-intro__title,
.home-intro__copy {
margin-top: var(--space-7);
}
.home-intro__description {
margin-top: var(--space-6);
}
.home-owner-profiles {
min-height: auto;
}
.home-owner-profiles__inner {
padding-top: var(--space-9);
padding-bottom: var(--space-9);
}
.home-owner-profiles__mark {
width: 6rem;
height: 5.12775rem;
}
.home-owner-profiles__title {
margin-top: var(--space-7);
}
.home-owner-profiles__grid {
grid-template-columns: 1fr;
grid-template-rows: none;
margin-top: var(--space-8);
}
.home-owner-profiles__question,
.home-owner-profiles__answer {
display: block;
padding: var(--space-6) 0;
border-left: 0;
}
.home-owner-profiles__question--second {
margin-top: var(--space-5);
border-top: 1px solid rgba(255, 255, 255, 0.85);
}
.home-owner-profiles__answer--second {
border-top: 0;
}
.home-owner-profiles__question p,
.home-owner-profiles__answer p {
text-align: left;
}
.home-steps {
min-height: auto;
}
.home-steps__inner {
padding-top: var(--space-9);
padding-bottom: var(--space-9);
}
.home-steps__lines {
height: 61px;
margin-bottom: 0;
}
.home-steps__title {
margin-top: var(--space-8);
}
.home-steps__list {
gap: var(--space-5);
margin-top: var(--space-9);
}
.home-step {
min-height: 0;
}
.home-step__panel {
width: 100%;
min-height: 17.1875rem;
background-color: var(--color-primary);
}
.home-step__title {
margin-top: 0;
}
.home-step__description {
max-height: none;
margin-top: var(--space-8);
overflow: visible;
opacity: 1;
visibility: visible;
}
.home-steps__footer {
margin-top: var(--space-9);
}
.home-testimonials {
min-height: auto;
}
.home-testimonials__inner {
padding-top: var(--space-8);
padding-bottom: var(--space-8);
}
.home-testimonials__stage {
margin-top: var(--space-5);
}
.home-articles {
min-height: 35rem;
}
.home-articles__inner {
padding-top: var(--space-8);
}
.home-articles__header,
.home-articles__viewport {
width: calc(100% - (2 * var(--container-gutter)));
}
.home-articles__viewport {
margin-top: var(--space-6);
}
}
@media (max-width: 35rem) {
.home-hero__content {
gap: var(--space-6);
}
.home-hero__text {
text-align: left;
}
.home-cta-strip {
height: auto;
min-height: 72px;
padding-block: var(--space-3);
}
.home-cta-strip__link {
height: auto;
min-height: 2.75rem;
}
.home-steps__title {
font-size: clamp(2rem, 10vw, 2.5rem);
}
.home-step {
min-height: 0;
}
.home-step__panel {
min-height: 13.75rem;
padding: var(--space-5);
}
.home-step__number {
top: var(--space-5);
left: var(--space-5);
}
.home-step__title {
font-size: clamp(1.625rem, 8vw, 2rem);
}
.home-testimonials__title {
font-size: clamp(2.5rem, 11vw, 3rem);
}
.home-testimonial {
padding: var(--space-5);
}
.home-testimonial__quote,
.home-testimonial__author {
font-size: clamp(1.125rem, 5.5vw, 1.375rem);
}
.home-articles__header {
align-items: flex-start;
height: auto;
}
.home-articles__title {
font-size: clamp(2.25rem, 11vw, 2.75rem);
}
.home-articles__view-all {
max-width: 8rem;
font-size: 1rem;
line-height: 1.25;
}
.home-articles__viewport {
width: calc(100% - (2 * var(--gutter-mobile)));
}
}
@media (prefers-reduced-motion: reduce) {
.home-hero__title,
.home-hero__text,
.home-intro__mark,
.home-owner-profiles__mark {
animation: none;
}
.home-steps__line {
animation: none;
}
.home-testimonial {
transition: none;
}
}
.about-page { overflow: hidden; }
.about-hero { position: relative; height: 721px; overflow: hidden; background: var(--color-white); }
.about-hero__shape { position: absolute; top: 0; left: 0; z-index: 2; display: flex; justify-content: flex-end; width: 639px; height: 193px; }
.about-hero__shape-graphic { position: relative; flex: 0 0 auto; width: 639px; height: 193px; animation: about-hero-shape 1830ms linear infinite; }
.about-hero__shape img { display: block; width: 100%; height: 100%; transform: scaleX(-1); }
.about-hero__image { display: block; width: 100%; height: 100%; }
.about-hero__panel { position: absolute; top: 193px; left: 0; z-index: 3; width: 32.421875%; height: 528px; background: var(--color-primary); }
.about-hero__title { position: absolute; top: 314px; left: 67px; margin: 0; font-size: 70px; font-weight: var(--font-thin); line-height: 1; color: var(--color-white); }
.about-hero__media { position: absolute; top: 193px; right: 0; width: 67.578125%; height: 528px; animation: about-hero-image 1830ms linear infinite; }
.about-hero__image { object-fit: cover; }
.about-story { height: 720px; background: var(--color-white); }
.about-story__inner { display: flex; flex-direction: column; align-items: center; padding-top: 99px; }
.about-story__mark { width: 78.025px; height: 66.682px; animation: about-story-mark 2000ms linear infinite; }
.about-story__copy { width: min(100%, 932px); margin-top: 71px; font-size: 25px; font-weight: var(--font-thin); line-height: 1; text-align: center; }
.about-story__copy p { margin: 0; }
.about-story__copy p + p { margin-top: 25px; }
.about-values { height: 910px; color: var(--color-white); background: #262627; }
.about-values__inner { padding-top: 87px; }
.about-values__title { margin: 0; font-size: 70px; font-weight: var(--font-thin); line-height: 1.857; color: inherit; text-align: center; }
.about-values__grid { width: min(calc(100% - 2 * var(--container-gutter)), 1047px); height: 469px; margin: 99px auto 0; border-top: 2px solid var(--color-white); border-right: 2px solid var(--color-white); border-left: 2px solid var(--color-white); }
.about-value { display: grid; grid-template-columns: 104px 345px 1fr; min-height: 116px; border-bottom: 2px solid var(--color-white); }
.about-value__icon, .about-value__title { border-right: 2px solid var(--color-white); }
.about-value__icon { display: flex; align-items: center; justify-content: center; }
.about-value__icon img { display: block; width: 63px; max-height: 63px; }
.about-value__title { display: flex; align-items: center; margin: 0; padding: 0 34px; font-size: 45px; font-weight: var(--font-thin); line-height: 1; color: inherit; }
.about-value__text { display: flex; align-items: center; margin: 0; padding: 0 38px; font-size: 25px; font-weight: var(--font-thin); line-height: 1; }
.about-challenges { height: 583px; background: var(--color-white); }
.about-challenges__inner { width: min(calc(100% - 2 * var(--container-gutter)), 1044px); margin: 0 auto; padding-top: 131px; }
.about-challenges__title { max-width: 939px; margin: 0; font-size: 50px; font-weight: var(--font-thin); line-height: 1; color: var(--color-black); }
.about-challenges__list { margin: 64px 0 0; padding: 0; list-style: none; font-size: 35px; font-weight: var(--font-thin); line-height: 1; }
.about-challenges__list li::before, .about-additional__list li::before { content: "- "; }
.about-additional { height: 777px; }
.about-additional__top { position: relative; height: 249px; overflow: hidden; }
.about-additional__top > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-additional__title { position: absolute; top: 39px; left: max(var(--container-gutter), calc((100vw - 1280px) / 2 + 70px)); margin: 0; font-size: 70px; font-weight: var(--font-thin); line-height: 1; color: var(--color-white); }
.about-additional__lower { display: grid; grid-template-columns: 1fr 1fr; height: 528px; }
.about-additional__blank { background: var(--color-white); }
.about-additional__panel { display: flex; align-items: center; justify-content: center; background: var(--color-primary); }
.about-additional__list { width: 417px; margin: 0; padding: 0; list-style: none; font-size: 30px; font-weight: var(--font-thin); line-height: 1; color: var(--color-white); text-align: right; }
.about-additional__list li + li { margin-top: 30px; }
.about-statement { height: 491px; color: var(--color-white); background: #28282a; }
.about-statement__inner { display: flex; align-items: center; width: min(calc(100% - 2 * var(--container-gutter)), 1032px); height: 100%; margin-inline: auto; }
.about-statement p { margin: 0; font-size: clamp(3rem, 5.46875vw, 70px); font-weight: var(--font-thin); line-height: 1; }
@keyframes about-hero-image { 0% { transform: translate(-198px,-2px); } 5% { transform: translate(-171.416px,-2px); } 10% { transform: translate(-146.665px,-2px); } 15% { transform: translate(-123.434px,-2px); } 20% { transform: translate(-101.695px,-2px); } 25% { transform: translate(-81.5px,-2px); } 30% { transform: translate(-62.953px,-2px); } 35% { transform: translate(-46.207px,-2px); } 40% { transform: translate(-31.471px,-2px); } 45% { transform: translate(-19.024px,-2px); } 50% { transform: translate(-9.246px,-2px); } 55% { transform: translate(-2.657px,-2px); } 60% { transform: translate(-.009px,-2px); } 65%, 100% { transform: translate(0,-2px); } }
@keyframes about-hero-shape { 0% { width: 639px; transform: translateX(0); filter: none; animation-timing-function: cubic-bezier(.5,0,.5,1); } 50%, 100% { width: 1280px; transform: translateX(641px); filter: brightness(0); } }
@keyframes about-story-mark { 0% { transform: rotate(180deg); animation-timing-function: cubic-bezier(.5,0,.5,1); } 21.855% { transform: rotate(90deg); } 44.146% { transform: rotate(0); } 65.782% { transform: rotate(-90deg); } 87.965%, 100% { transform: rotate(-180deg); } }
@media (max-width: 63.9375rem) {
.about-hero { height: auto; min-height: 620px; padding-top: 150px; }
.about-hero__shape { width: 50vw; max-width: 639px; }
.about-hero__shape-graphic { width: 100%; animation: none; filter: brightness(0); }
.about-hero__panel { top: 150px; width: 42%; height: 470px; }
.about-hero__media { top: 150px; width: 68%; height: 470px; animation: none; }
.about-hero__title { top: auto; bottom: 70px; left: var(--container-gutter); font-size: clamp(3rem, 7vw, 4.375rem); }
.about-story, .about-values, .about-challenges, .about-additional, .about-statement { height: auto; }
.about-story__inner { padding-top: var(--space-9); padding-bottom: var(--space-9); }
.about-story__copy { margin-top: var(--space-7); font-size: clamp(1.125rem, 2.4vw, 1.5625rem); line-height: 1.25; }
.about-values__inner { padding: var(--space-9) var(--container-gutter); }
.about-values__title { font-size: clamp(3rem, 7vw, 4.375rem); line-height: 1; }
.about-values__grid { width: 100%; height: auto; margin-top: var(--space-8); }
.about-value { grid-template-columns: 90px minmax(230px,.75fr) 1.25fr; }
.about-value__title { padding-inline: var(--space-5); font-size: clamp(2rem,4vw,2.8125rem); }
.about-value__text { padding: var(--space-5); font-size: clamp(1.125rem,2.4vw,1.5625rem); line-height: 1.2; }
.about-challenges__inner { padding-top: var(--space-9); padding-bottom: var(--space-9); }
.about-challenges__title { font-size: clamp(2.25rem,5vw,3.125rem); }
.about-challenges__list { margin-top: var(--space-7); font-size: clamp(1.5rem,3.5vw,2.1875rem); line-height: 1.15; }
.about-challenges__list li + li { margin-top: var(--space-2); }
.about-additional__title { font-size: clamp(3rem,7vw,4.375rem); }
.about-additional__lower { height: auto; min-height: 528px; }
.about-additional__list { width: min(calc(100% - 2 * var(--space-6)),417px); font-size: clamp(1.5rem,3vw,1.875rem); }
.about-statement__inner { min-height: 420px; padding-block: var(--space-8); }
}
@media (max-width: 47.9375rem) {
.about-hero { min-height: 660px; padding-top: 130px; }
.about-hero__shape { width: 100%; height: 130px; }
.about-hero__shape-graphic { height: 130px; }
.about-hero__media { top: 130px; right: 0; width: 100%; height: 350px; }
.about-hero__panel { top: 430px; width: 70%; height: 230px; }
.about-hero__title { bottom: 35px; }
.about-value { grid-template-columns: 80px 1fr; padding-block: var(--space-5); }
.about-value__icon { grid-row: 1 / span 2; border-right: 2px solid var(--color-white); }
.about-value__title { border-right: 0; font-size: 2rem; }
.about-value__text { padding-top: var(--space-3); }
.about-additional__lower { display: block; min-height: 0; }
.about-additional__blank { display: none; }
.about-additional__panel { min-height: 480px; padding: var(--space-8) var(--container-gutter); }
.about-additional__list { text-align: left; }
.about-statement p br { display: none; }
}
@media (prefers-reduced-motion: reduce) { .about-hero__shape-graphic, .about-hero__media, .about-story__mark { animation: none; } .about-hero__media { transform: translate(0,-2px); } .about-hero__shape-graphic { width: 1280px; transform: translateX(641px); filter: brightness(0); } }
@media (prefers-reduced-motion: reduce) and (max-width: 63.9375rem) { .about-hero__shape-graphic { width: 100%; transform: none; } }
.services-page {
background: var(--color-white);
}
.services-page__intro {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: 462px;
padding: 72px var(--container-gutter) 40px;
color: var(--color-white);
background: var(--color-primary);
text-align: center;
}
.services-page__lines {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 206px;
height: 19px;
}
.services-page__lines span {
display: block;
width: 100%;
height: 2px;
background: currentColor;
}
.services-page__title {
margin: 25px 0 0;
font-size: 70px;
font-weight: var(--font-thin);
line-height: 1;
color: inherit;
}
.services-page__intro-text {
width: min(100%, 1140px);
margin-top: 26px;
font-size: 25px;
font-weight: var(--font-thin);
line-height: 1;
}
.services-page__intro-text p {
margin: 0;
}
.services-page__item {
margin: 0;
}
.services-page__link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 103px;
padding-inline: var(--container-gutter);
font-size: 45px;
font-weight: var(--font-thin);
line-height: 1;
color: var(--color-black);
background: var(--color-white);
text-align: center;
text-decoration: none;
transition: color 250ms ease-in, background-color 250ms ease-in;
}
.services-page__link:hover,
.services-page__link:focus-visible {
color: var(--color-white);
background: var(--color-primary);
}
.services-page__cta {
display: flex;
align-items: center;
justify-content: center;
height: 142px;
padding-inline: var(--container-gutter);
background: #262627;
text-align: center;
}
.services-page__cta a {
font-size: 45px;
font-weight: var(--font-thin);
line-height: 1;
color: var(--color-white);
text-decoration: none;
transition: font-weight 250ms ease-in;
}
.services-page__cta a:hover,
.services-page__cta a:focus-visible {
font-weight: var(--font-light);
}
.single-service-page,
.single-service-page__site {
min-height: 100%;
color: var(--color-white);
background: var(--color-primary);
}
.single-service-page__main {
min-height: 100vh;
}
.single-service-page__article {
width: min(calc(100% - (2 * var(--container-gutter))), 1092px);
margin-inline: auto;
padding: 76px 0 96px;
}
.single-service-page__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
}
.single-service-page__title {
margin: 0;
font-size: clamp(2.25rem, 3.515625vw, 45px);
font-weight: var(--font-thin);
line-height: 1;
color: inherit;
}
.single-service-page__close {
flex: 0 0 auto;
font-family: "Jost", Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: var(--font-light);
line-height: 1;
color: inherit;
text-decoration: none;
}
.single-service-page__content {
margin-top: 101px;
font-size: 20px;
font-weight: var(--font-thin);
line-height: 1.25;
text-align: justify;
}
.single-service-page__content p,
.single-service-page__content h2,
.single-service-page__content h3 {
margin: 0;
}
.single-service-page__content p + p,
.single-service-page__content p + h2,
.single-service-page__content p + h3,
.single-service-page__content h2 + p,
.single-service-page__content h3 + p {
margin-top: 25px;
}
.single-service-page__content h2,
.single-service-page__content h3 {
font-size: inherit;
font-weight: var(--font-regular);
line-height: inherit;
color: inherit;
}
@media (max-width: 63.9375rem) {
.services-page__intro {
height: auto;
min-height: 420px;
padding-block: var(--space-8);
}
.services-page__title {
font-size: clamp(2.75rem, 7vw, 4.375rem);
}
.services-page__intro-text {
font-size: clamp(1.125rem, 2.5vw, 1.5625rem);
line-height: 1.2;
}
.services-page__link,
.services-page__cta a {
font-size: clamp(2rem, 4.5vw, 2.8125rem);
}
}
@media (max-width: 47.9375rem) {
.services-page__lines {
width: min(206px, 55vw);
}
.services-page__link {
height: auto;
min-height: 88px;
padding-block: var(--space-5);
font-size: clamp(1.65rem, 8vw, 2.25rem);
}
.services-page__cta {
min-height: 120px;
height: auto;
}
.single-service-page__article {
padding-block: var(--space-7) var(--space-9);
}
.single-service-page__header {
align-items: flex-start;
}
.single-service-page__title {
font-size: clamp(2rem, 9vw, 2.75rem);
}
.single-service-page__close {
font-size: 42px;
}
.single-service-page__content {
margin-top: var(--space-8);
font-size: 1.125rem;
line-height: 1.4;
text-align: left;
}
}
@media (prefers-reduced-motion: reduce) {
.services-page__link,
.services-page__cta a {
transition: none;
}
}
.properties-archive {
min-height: 989px;
background: var(--color-white);
}
.properties-archive__layout {
display: grid;
grid-template-columns: 675px 605px;
align-items: start;
gap: 0;
width: min(100%, 1280px);
min-height: 989px;
margin-inline: auto;
}
.properties-archive__intro {
position: sticky;
top: 0;
height: 989px;
align-self: start;
min-width: 0;
color: var(--color-primary);
}
.properties-archive__lines {
position: absolute;
top: 41px;
left: 47px;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 206px;
height: 19px;
}
.properties-archive__lines span {
display: block;
width: 100%;
height: 2px;
background: currentColor;
}
.properties-archive__copy {
position: absolute;
top: 531px;
left: 47px;
}
.properties-archive__title {
margin: 0;
font-size: 70px;
font-weight: var(--font-thin);
line-height: 1;
color: inherit;
}
.properties-archive__subtitle {
margin: 72px 0 0;
font-size: 50px;
font-weight: var(--font-thin);
line-height: 1;
}
.properties-archive__viewport {
width: 605px;
margin-top: 43px;
}
.single-property__gallery::-webkit-scrollbar {
display: none;
}
.properties-archive__list {
display: flex;
flex-direction: column;
gap: 41px;
width: 560px;
margin: 21px 22px 21px 23px;
}
.property-card,
.property-card__link {
width: 560px;
height: 566.479px;
}
.property-card {
margin: 0;
}
.property-card__link {
position: relative;
display: block;
overflow: hidden;
color: var(--color-white);
text-decoration: none;
}
.property-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.property-card__overlay,
.property-card__content {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 275ms ease-in-out;
}
.property-card__overlay {
background: rgba(62, 66, 142, 0.4);
}
.property-card__content {
display: block;
color: var(--color-white);
}
.property-card__content,
.property-card__title,
.property-card__area,
.property-card__location,
.property-card__price,
.property-card__more {
color: var(--color-white);
}
.property-card__link:hover .property-card__overlay,
.property-card__link:hover .property-card__content,
.property-card__link:focus-visible .property-card__overlay,
.property-card__link:focus-visible .property-card__content {
opacity: 1;
}
.property-card__title,
.property-card__area,
.property-card__location,
.property-card__price,
.property-card__more {
position: absolute;
display: block;
}
.property-card__title {
top: 36px;
left: 33px;
font-size: 72px;
font-weight: var(--font-thin);
line-height: 0.95;
}
.property-card__area {
top: 122px;
left: 33px;
font-size: 40px;
font-weight: var(--font-thin);
line-height: 2;
}
.property-card__location {
top: 51px;
right: 32px;
font-size: 30px;
font-weight: var(--font-thin);
line-height: 1;
text-align: right;
}
.property-card__price {
bottom: 30px;
left: 33px;
font-size: 50px;
font-weight: var(--font-light);
line-height: 1;
}
.property-card__more {
right: 32px;
bottom: 21px;
font-size: 20px;
font-weight: var(--font-thin);
line-height: 2;
text-align: right;
}
.single-property__gallery {
display: flex;
width: 100%;
height: min(520px, 40.625vw);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.single-property__slide {
flex: 0 0 min(942px, 73.6vw);
height: 100%;
margin: 0 -1px 0 0;
overflow: hidden;
scroll-snap-align: start;
}
.single-property__gallery-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.single-property__slide:nth-child(4) .single-property__gallery-image {
object-position: 50% 65.2%;
}
.single-property__slide:nth-child(5) .single-property__gallery-image {
object-position: 50% 60.8%;
}
.single-property__slide:nth-child(6) .single-property__gallery-image {
object-position: 50% 72.9%;
}
.single-property__gallery:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
.single-property__summary {
padding: 0 47px;
}
.single-property__summary-primary,
.single-property__summary-secondary {
display: grid;
align-items: center;
}
.single-property__summary-primary {
grid-template-columns: 1fr 1fr 1fr;
height: 71px;
border-bottom: 1px solid var(--color-black);
}
.single-property__summary-secondary {
grid-template-columns: 1fr 1fr;
height: 139px;
}
.single-property__title,
.single-property__location,
.single-property__price,
.single-property__area,
.single-property__code {
margin: 0;
font-weight: var(--font-thin);
color: var(--color-black);
}
.single-property__title,
.single-property__location,
.single-property__price,
.single-property__area {
font-size: 30px;
line-height: 1;
}
.single-property__location {
text-align: center;
}
.single-property__price,
.single-property__code {
text-align: right;
}
.single-property__code {
font-size: 20px;
line-height: 1;
}
.single-property__information {
display: grid;
grid-template-columns: minmax(0, 836fr) minmax(0, 444fr);
min-height: 629px;
}
.single-property__details {
padding: 49px 48px 64px;
background: #f4f4f4;
}
.single-property__details h2 {
margin: 0;
font-size: 45px;
font-weight: var(--font-thin);
line-height: 1;
color: var(--color-black);
}
.single-property__content {
margin-top: 52px;
font-size: 25px;
font-weight: var(--font-thin);
line-height: 1;
}
.single-property__content ul {
margin: 0;
padding-left: 1em;
}
.single-property__contact {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 49px 35px 27px;
color: var(--color-white);
background: #28282a;
}
.single-property__contact-title {
font-size: 45px;
font-weight: var(--font-thin);
line-height: 1;
color: inherit;
text-decoration: none;
}
.single-property__contact-details {
display: flex;
flex-direction: column;
font-size: 20px;
font-weight: var(--font-thin);
line-height: 1.2;
}
.single-property__contact-details a {
color: inherit;
text-decoration: none;
}
@media (max-width: 63.9375rem) {
.properties-archive {
height: auto;
min-height: 0;
}
.properties-archive__layout {
display: block;
min-height: 0;
}
.properties-archive__intro {
position: static;
height: auto;
padding: var(--space-8) var(--container-gutter);
}
.properties-archive__lines,
.properties-archive__copy {
position: static;
}
.properties-archive__title {
margin-top: var(--space-9);
font-size: clamp(3rem, 8vw, 4.375rem);
}
.properties-archive__subtitle {
margin-top: var(--space-7);
font-size: clamp(2.25rem, 6vw, 3.125rem);
}
.properties-archive__viewport {
width: 100%;
height: auto;
margin: 0;
overflow: visible;
}
.properties-archive__list {
width: min(calc(100% - (2 * var(--container-gutter))), 560px);
margin: 0 auto var(--space-9);
}
.property-card,
.property-card__link {
width: 100%;
height: auto;
aspect-ratio: 560 / 566.479;
}
.single-property__information {
grid-template-columns: 1fr 35%;
}
}
@media (min-width: 48rem) and (max-width: 63.9375rem) {
.property-card__title {
font-size: clamp(3.5rem, 8vw, 4.5rem);
}
}
@media (hover: none), (max-width: 47.9375rem) {
.property-card__overlay,
.property-card__content {
opacity: 1;
}
.properties-archive__lines {
width: min(206px, 55vw);
}
.single-property__slide {
flex-basis: 88vw;
}
.single-property__summary {
padding-inline: var(--container-gutter);
}
.single-property__summary-primary,
.single-property__summary-secondary {
grid-template-columns: 1fr;
height: auto;
gap: var(--space-3);
padding-block: var(--space-5);
}
.single-property__location,
.single-property__price,
.single-property__code {
text-align: left;
}
.single-property__information {
grid-template-columns: 1fr;
}
.single-property__details,
.single-property__contact {
padding: var(--space-7) var(--container-gutter);
}
.single-property__details h2,
.single-property__contact-title {
font-size: clamp(2.25rem, 10vw, 2.8125rem);
}
.single-property__content {
font-size: 1.25rem;
line-height: 1.25;
}
.single-property__contact {
min-height: 420px;
}
}
@media (max-width: 47.9375rem) {
.single-property__gallery {
height: 48.58vw;
}
.property-card__content {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
grid-template-rows: auto auto 1fr auto;
column-gap: clamp(0.75rem, 4vw, 1rem);
padding: 22px 18px;
}
.property-card__title,
.property-card__area,
.property-card__location,
.property-card__price,
.property-card__more {
position: static;
max-width: 100%;
color: var(--color-white);
}
.property-card__title {
grid-column: 1;
grid-row: 1;
align-self: start;
font-size: clamp(2.6rem, 13vw, 4rem);
line-height: 0.95;
white-space: normal;
overflow-wrap: anywhere;
}
.property-card__area {
grid-column: 1;
grid-row: 2;
align-self: start;
margin-top: clamp(0.5rem, 2.5vw, 0.875rem);
font-size: clamp(1.6rem, 7vw, 2.4rem);
line-height: 1;
}
.property-card__location {
grid-column: 2;
grid-row: 1 / span 2;
align-self: start;
justify-self: end;
font-size: clamp(1.15rem, 5vw, 1.65rem);
line-height: 1.05;
text-align: right;
}
.property-card__price {
grid-column: 1;
grid-row: 4;
align-self: end;
font-size: clamp(1.8rem, 8vw, 2.7rem);
line-height: 1;
white-space: nowrap;
}
.property-card__more {
grid-column: 2;
grid-row: 4;
align-self: end;
justify-self: end;
font-size: clamp(0.9rem, 4vw, 1.2rem);
line-height: 1.1;
text-align: right;
}
}
@media (prefers-reduced-motion: reduce) {
.property-card__overlay,
.property-card__content {
transition: none;
}
}
.collaboration-page {
overflow: hidden;
background: var(--color-white);
}
.collaboration-architecture {
position: relative;
height: 1533px;
background: var(--color-white);
}
.collaboration-architecture__house,
.collaboration-architecture__side,
.collaboration-architecture__transition {
position: absolute;
display: block;
max-width: none;
pointer-events: none;
}
.collaboration-architecture__house {
top: 25.65px;
left: 50%;
z-index: 2;
width: 1140px;
height: 415.701px;
transform: translateX(-50%);
}
.collaboration-architecture__side {
top: 261px;
z-index: 1;
height: 1155px;
}
.collaboration-architecture__side--left {
left: calc(50% - 570px);
width: 486px;
}
.collaboration-architecture__side--right {
left: calc(50% + 127px);
width: 442px;
}
.collaboration-architecture__transition {
bottom: 0;
left: 50%;
z-index: 2;
width: 1139px;
height: 117px;
transform: translateX(-50%) scaleY(-1);
}
.collaboration-hero__title {
margin: 0;
font-size: 70px;
font-weight: var(--font-thin);
line-height: 1;
color: var(--color-white);
}
.collaboration-hero__title-left,
.collaboration-hero__title-right {
position: absolute;
z-index: 3;
}
.collaboration-hero__title-left {
top: 261px;
left: calc(50% - 537px);
}
.collaboration-hero__title-right {
top: 331px;
left: calc(50% + 400px);
}
.collaboration-columns {
position: relative;
z-index: 3;
width: min(100%, 1280px);
height: 100%;
margin-inline: auto;
}
.collaboration-column {
position: absolute;
top: 505px;
font-weight: var(--font-thin);
color: var(--color-black);
}
.collaboration-column--you {
left: 103px;
width: 413px;
}
.collaboration-column--us {
right: 98px;
width: 387px;
}
.collaboration-column__label {
margin: 0;
font-size: 40px;
line-height: 1;
}
.collaboration-column--us .collaboration-column__label {
text-align: right;
}
.collaboration-column__copy {
margin-top: 43px;
font-size: 25px;
line-height: 0.92;
text-align: justify;
}
.collaboration-column__copy p {
margin: 0;
}
.collaboration-column__copy p + p {
margin-top: 23px;
}
.collaboration-statement {
height: 413px;
color: var(--color-white);
background: var(--color-primary);
}
.collaboration-statement__inner {
display: flex;
align-items: center;
width: min(calc(100% - (2 * var(--container-gutter))), 1139px);
height: 100%;
margin-inline: auto;
}
.collaboration-statement p {
margin: 0;
font-size: 35px;
font-weight: var(--font-thin);
line-height: 1;
text-align: justify;
}
.collaboration-values {
height: 838px;
color: var(--color-primary);
background: var(--color-white);
}
.collaboration-values__inner {
width: min(100%, 1280px);
height: 100%;
margin-inline: auto;
padding-top: 83px;
}
.collaboration-values__title {
margin: 0 0 0 119px;
font-size: 70px;
font-weight: var(--font-thin);
line-height: 1;
color: inherit;
}
.collaboration-values__grid {
display: grid;
grid-template-rows: repeat(4, 1fr);
width: 1047px;
height: 469px;
margin: 83px 0 0 117px;
border-top: 2px solid var(--color-primary);
border-right: 2px solid var(--color-primary);
border-left: 2px solid var(--color-primary);
}
.collaboration-value {
display: grid;
grid-template-columns: 104px 345px minmax(0, 1fr);
min-height: 0;
border-bottom: 2px solid var(--color-primary);
}
.collaboration-value__icon,
.collaboration-value__title {
border-right: 2px solid var(--color-primary);
}
.collaboration-value__icon {
display: flex;
align-items: center;
justify-content: center;
}
.collaboration-value__icon img {
display: block;
width: 63px;
max-height: 63px;
}
.collaboration-value__title {
display: flex;
align-items: center;
margin: 0;
padding-inline: 34px;
font-size: 45px;
font-weight: var(--font-thin);
line-height: 1;
color: inherit;
}
.collaboration-value__text {
display: flex;
align-items: center;
margin: 0;
padding-inline: 38px;
font-size: 25px;
font-weight: var(--font-thin);
line-height: 1;
color: inherit;
}
@media (max-width: 63.9375rem) {
.collaboration-architecture {
height: auto;
padding: var(--space-7) var(--container-gutter) var(--space-9);
}
.collaboration-architecture__house {
position: relative;
top: auto;
left: 50%;
width: min(100%, 900px);
height: auto;
}
.collaboration-architecture__side,
.collaboration-architecture__transition {
display: none;
}
.collaboration-hero__title {
font-size: clamp(3rem, 7vw, 4.375rem);
}
.collaboration-hero__title-left {
top: clamp(8rem, 27vw, 15rem);
left: calc(var(--container-gutter) + 2.5vw);
}
.collaboration-hero__title-right {
top: clamp(11rem, 32vw, 18.5rem);
right: calc(var(--container-gutter) + 3vw);
left: auto;
}
.collaboration-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-8);
width: 100%;
height: auto;
margin-top: var(--space-8);
}
.collaboration-column {
position: static;
width: auto;
}
.collaboration-column__copy {
font-size: clamp(1.125rem, 2.4vw, 1.5625rem);
line-height: 1.2;
}
.collaboration-statement,
.collaboration-values {
height: auto;
}
.collaboration-statement__inner {
min-height: 340px;
padding-block: var(--space-8);
}
.collaboration-statement p {
font-size: clamp(1.75rem, 3.6vw, 2.1875rem);
line-height: 1.15;
}
.collaboration-values__inner {
width: 100%;
height: auto;
padding: var(--space-9) var(--container-gutter);
}
.collaboration-values__title {
margin: 0;
font-size: clamp(3rem, 7vw, 4.375rem);
}
.collaboration-values__grid {
width: 100%;
height: auto;
margin: var(--space-8) 0 0;
}
.collaboration-value {
grid-template-columns: 90px minmax(230px, 0.75fr) 1.25fr;
min-height: 118px;
}
.collaboration-value__title {
padding-inline: var(--space-5);
font-size: clamp(2rem, 4vw, 2.8125rem);
}
.collaboration-value__text {
padding: var(--space-5);
font-size: clamp(1.125rem, 2.4vw, 1.5625rem);
line-height: 1.2;
}
}
@media (max-width: 47.9375rem) {
.collaboration-architecture {
padding-top: var(--space-5);
}
.collaboration-architecture__house {
width: 140%;
max-width: none;
}
.collaboration-hero__title {
font-size: clamp(2.25rem, 11vw, 3.5rem);
}
.collaboration-hero__title-left {
top: clamp(5.5rem, 29vw, 8rem);
left: var(--container-gutter);
}
.collaboration-hero__title-right {
top: clamp(8rem, 39vw, 11rem);
right: var(--container-gutter);
}
.collaboration-columns {
grid-template-columns: 1fr;
gap: var(--space-9);
margin-top: var(--space-7);
}
.collaboration-column--us .collaboration-column__label {
text-align: left;
}
.collaboration-column__label {
font-size: 2rem;
}
.collaboration-column__copy {
margin-top: var(--space-5);
font-size: 1.125rem;
line-height: 1.35;
text-align: left;
}
.collaboration-statement__inner {
min-height: 0;
}
.collaboration-statement p {
font-size: 1.5rem;
line-height: 1.25;
text-align: left;
}
.collaboration-values__title {
font-size: clamp(2.75rem, 14vw, 4rem);
}
.collaboration-value {
grid-template-columns: 80px 1fr;
padding-block: var(--space-5);
}
.collaboration-value__icon {
grid-row: 1 / span 2;
}
.collaboration-value__title {
border-right: 0;
font-size: 2rem;
}
.collaboration-value__text {
padding-top: var(--space-3);
}
}
.blog-archive,
.blog-single {
overflow: hidden;
background: var(--color-white);
}
.blog-lines {
display: block;
width: 206px;
height: 18px;
}
.blog-image-fallback {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--color-primary), var(--color-dark));
}
.blog-archive__hero {
display: grid;
grid-template-columns: minmax(0, 685fr) minmax(0, 595fr);
height: 376px;
}
.blog-archive__recent-heading {
position: relative;
background: var(--color-white);
}
.blog-archive__recent-heading h2 {
position: absolute;
bottom: 41px;
left: 47px;
margin: 0;
font-size: 45px;
font-weight: var(--font-thin);
line-height: 1;
color: var(--color-black);
}
.blog-archive__hero-panel,
.blog-single__hero-panel {
position: relative;
color: var(--color-white);
background: var(--color-black);
}
.blog-archive__hero-panel .blog-lines {
position: absolute;
top: 38px;
left: 42px;
}
.blog-archive__hero-intro {
position: absolute;
top: 94px;
left: 42px;
margin: 0;
font-size: 30px;
font-weight: var(--font-thin);
line-height: 1;
}
.blog-archive__hero-panel h1 {
position: absolute;
bottom: 16px;
left: 42px;
margin: 0;
font-size: 70px;
font-weight: var(--font-thin);
line-height: 1;
color: inherit;
}
.blog-featured {
display: flex;
width: 100%;
height: 343px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.blog-featured::-webkit-scrollbar {
display: none;
}
.blog-featured-card {
flex: 0 0 min(685px, 53.515625vw);
height: 343px;
margin: 0;
scroll-snap-align: start;
}
.blog-featured-card__link {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
color: var(--color-white);
text-decoration: none;
}
.blog-featured-card__image,
.blog-row__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-featured-card__image {
filter: grayscale(1);
}
.blog-featured-card__overlay,
.blog-row__overlay {
position: absolute;
inset: 0;
background: rgba(62, 66, 142, 0.2);
transition: background-color 250ms ease-in;
}
.blog-featured-card__content {
position: absolute;
inset: 47px 35px 30px;
}
.blog-featured-card__title {
max-width: 540px;
margin: 0;
font-size: 40px;
font-weight: var(--font-thin);
line-height: 1;
color: inherit;
transition: opacity 275ms ease-in-out;
}
.blog-featured-card__hover-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
color: var(--color-white);
opacity: 0;
transition: opacity 275ms ease-in-out;
}
.blog-featured-card__excerpt {
display: -webkit-box;
max-width: 540px;
margin: 0;
overflow: hidden;
font-size: 25px;
font-weight: var(--font-thin);
line-height: 1.1;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
}
.blog-featured-card__meta {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-5);
font-size: 20px;
font-weight: var(--font-thin);
line-height: 1;
}
.blog-featured-card__cta {
text-align: right;
}
.blog-featured-card__link:hover .blog-featured-card__overlay,
.blog-featured-card__link:focus-visible .blog-featured-card__overlay {
background: rgba(62, 66, 142, 0.6);
}
.blog-featured-card__link:hover .blog-featured-card__title,
.blog-featured-card__link:focus-visible .blog-featured-card__title {
opacity: 0;
}
.blog-featured-card__link:hover .blog-featured-card__hover-content,
.blog-featured-card__link:focus-visible .blog-featured-card__hover-content {
opacity: 1;
}
.blog-index__header {
display: flex;
align-items: center;
justify-content: space-between;
height: 165px;
padding: 0 58px 0 35px;
}
.blog-index__header h2,
.blog-related__header h2 {
margin: 0;
font-size: 45px;
font-weight: var(--font-thin);
line-height: 1;
color: var(--color-black);
}
.blog-sort {
position: relative;
z-index: 4;
font-size: 25px;
font-weight: var(--font-thin);
}
.blog-sort summary {
cursor: pointer;
list-style: none;
}
.blog-sort summary::-webkit-details-marker {
display: none;
}
.blog-sort__options {
position: absolute;
top: calc(100% + 8px);
right: 0;
display: flex;
flex-direction: column;
min-width: 160px;
padding: var(--space-3);
background: var(--color-white);
border: 1px solid var(--color-dark);
}
.blog-sort__options a {
color: var(--color-black);
text-decoration: none;
}
.blog-sort__options a + a {
margin-top: var(--space-2);
}
.blog-sort__options a[aria-current="true"] {
color: var(--color-primary);
}
.blog-row,
.blog-row__link {
width: 100%;
height: 116px;
}
.blog-row__link {
display: grid;
grid-template-columns: 259px minmax(0, 1fr) 180px;
align-items: stretch;
color: var(--color-black);
background: var(--color-white);
text-decoration: none;
transition: color 250ms ease-in, background-color 250ms ease-in;
}
.blog-row__media {
position: relative;
display: block;
overflow: hidden;
}
.blog-row__overlay {
background: rgba(62, 66, 142, 0.3);
}
.blog-row__body {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding: 10px 48px;
}
.blog-row__body h3 {
margin: 0;
font-size: 35px;
font-weight: var(--font-thin);
line-height: 1;
color: inherit;
}
.blog-row__excerpt {
display: block;
margin-top: 5px;
font-size: 15px;
font-weight: var(--font-thin);
line-height: 1.15;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.blog-row__date {
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: 0 58px 19px 0;
font-size: 20px;
font-weight: var(--font-extralight);
line-height: 1;
}
.blog-row__link:hover,
.blog-row__link:focus-visible {
color: var(--color-white);
background: var(--color-primary);
}
.blog-row__link:hover .blog-row__overlay,
.blog-row__link:focus-visible .blog-row__overlay {
background: rgba(62, 66, 142, 0.6);
}
.blog-pagination {
display: flex;
justify-content: flex-end;
min-height: 98px;
padding: 30px 52px;
border-top: 1px solid var(--color-black);
border-bottom: 1px solid var(--color-black);
font-family: var(--font-family-secondary);
font-size: 30px;
line-height: 1;
}
.blog-pagination .page-numbers {
margin-left: 14px;
color: rgba(0, 0, 0, 0.5);
text-decoration: none;
}
.blog-pagination .current {
color: var(--color-black);
}
.blog-social {
display: grid;
grid-template-columns: 361px minmax(0, 561px) 1fr;
align-items: end;
gap: 0;
min-height: 336px;
padding: 70px 55px 75px;
background: var(--color-white);
}
.blog-social__copy h2 {
margin: 0;
font-size: 50px;
font-weight: var(--font-thin);
line-height: 1;
color: var(--color-black);
}
.blog-social__copy p {
margin: 33px 0 0;
font-size: 35px;
font-weight: var(--font-thin);
line-height: 1;
}
.blog-social__line {
align-self: end;
margin-bottom: 34px;
border-top: 2px solid var(--color-primary);
}
.blog-social__links {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
padding-bottom: 23px;
font-size: 29px;
font-weight: var(--font-thin);
line-height: 1.15;
}
.blog-social__links a {
color: var(--color-black);
text-decoration: none;
}
.blog-single__hero {
display: grid;
grid-template-columns: minmax(0, 685fr) minmax(0, 595fr);
height: 386px;
}
.blog-single__media {
height: 386px;
overflow: hidden;
}
.blog-single__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-single__hero-panel .blog-lines {
position: absolute;
top: 38px;
left: 42px;
}
.blog-single__hero-panel h1 {
position: absolute;
top: 126px;
left: 42px;
width: min(458px, calc(100% - 84px));
margin: 0;
font-size: 35px;
font-weight: var(--font-thin);
line-height: 1;
color: inherit;
}
.blog-single__hero-panel time {
position: absolute;
bottom: 35px;
left: 42px;
font-size: 25px;
font-weight: var(--font-thin);
line-height: 1;
}
.blog-single__content {
width: min(calc(100% - (2 * var(--container-gutter))), 1112px);
margin-inline: auto;
padding: 80px 0 140px;
font-size: 25px;
font-weight: var(--font-thin);
line-height: 1.25;
color: var(--color-black);
}
.blog-single__content > :first-child {
margin-top: 0;
}
.blog-single__content > :last-child {
margin-bottom: 0;
}
.blog-single__content h2 {
font-size: 35px;
}
.blog-single__content h3 {
font-size: 30px;
}
.blog-single__content img {
height: auto;
}
.blog-related {
padding-top: 34px;
}
.blog-related__header {
display: flex;
align-items: center;
justify-content: space-between;
height: 110px;
padding: 0 84px;
}
.blog-related__header h2 {
font-size: 35px;
}
.blog-related__header a {
font-size: 20px;
font-weight: var(--font-thin);
color: var(--color-black);
}
@media (max-width: 63.9375rem) {
.blog-featured-card {
flex-basis: min(685px, 72vw);
}
.blog-row__link {
grid-template-columns: 220px minmax(0, 1fr) 130px;
}
.blog-row__body {
padding-inline: var(--space-6);
}
.blog-row__body h3 {
font-size: clamp(1.75rem, 3.4vw, 2.1875rem);
}
.blog-row__date {
padding-right: var(--space-5);
}
.blog-social {
grid-template-columns: 1fr 1fr;
gap: var(--space-7);
padding-inline: var(--container-gutter);
}
.blog-social__line {
display: none;
}
}
@media (max-width: 47.9375rem) {
.blog-archive__hero,
.blog-single__hero {
display: flex;
flex-direction: column;
height: auto;
}
.blog-archive__hero-panel {
order: -1;
height: 300px;
}
.blog-archive__recent-heading {
height: 190px;
}
.blog-archive__recent-heading h2 {
bottom: 35px;
left: var(--container-gutter);
font-size: 2.8125rem;
}
.blog-archive__hero-intro {
font-size: 1.5rem;
}
.blog-archive__hero-panel h1 {
font-size: 3.75rem;
}
.blog-featured {
height: min(343px, 55vw);
}
.blog-featured-card {
flex-basis: 90vw;
height: 100%;
}
.blog-featured-card__content {
inset: var(--space-5) var(--container-gutter);
}
.blog-featured-card__title {
font-size: clamp(1.75rem, 8vw, 2.5rem);
}
.blog-featured-card__excerpt {
font-size: clamp(1rem, 4vw, 1.25rem);
-webkit-line-clamp: 4;
}
.blog-featured-card__meta {
font-size: 1rem;
}
.blog-index__header {
height: auto;
padding: var(--space-8) var(--container-gutter);
}
.blog-index__header h2 {
font-size: 2.5rem;
}
.blog-sort {
font-size: 1.125rem;
}
.blog-row,
.blog-row__link {
height: auto;
}
.blog-row__link {
grid-template-columns: 34% minmax(0, 1fr);
min-height: 150px;
}
.blog-row__media {
grid-row: 1 / span 2;
}
.blog-row__body {
padding: var(--space-4);
}
.blog-row__body h3 {
font-size: clamp(1.25rem, 5.5vw, 1.65rem);
}
.blog-row__excerpt {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.blog-row__date {
grid-column: 2;
align-items: flex-start;
justify-content: flex-start;
padding: 0 var(--space-4) var(--space-4);
font-size: 1rem;
}
.blog-pagination {
padding-inline: var(--container-gutter);
font-size: 1.5rem;
}
.blog-social {
grid-template-columns: 1fr;
min-height: 0;
padding-block: var(--space-9);
}
.blog-social__copy h2 {
font-size: clamp(2.25rem, 11vw, 3.125rem);
}
.blog-social__copy p {
font-size: 1.75rem;
}
.blog-social__links {
align-items: flex-start;
padding: 0;
font-size: 1.5rem;
}
.blog-single__media,
.blog-single__hero-panel {
height: 300px;
}
.blog-single__hero-panel h1 {
top: 95px;
left: var(--container-gutter);
width: calc(100% - (2 * var(--container-gutter)));
font-size: clamp(1.75rem, 8vw, 2.1875rem);
}
.blog-single__hero-panel .blog-lines,
.blog-single__hero-panel time {
left: var(--container-gutter);
}
.blog-single__content {
padding-block: var(--space-9);
font-size: 1.125rem;
line-height: 1.4;
}
.blog-related {
padding-top: 0;
}
.blog-related__header {
height: auto;
padding: var(--space-8) var(--container-gutter);
}
.blog-related__header h2 {
font-size: 2rem;
}
}
@media (hover: none) {
.blog-featured-card__overlay {
background: rgba(62, 66, 142, 0.4);
}
}
@media (prefers-reduced-motion: reduce) {
.blog-featured-card__overlay,
.blog-row__overlay,
.blog-featured-card__title,
.blog-featured-card__hover-content,
.blog-row__link {
transition: none;
}
}
.contact-page {
overflow: hidden;
color: var(--color-black);
background: var(--color-white);
}
.contact-page__top {
position: relative;
height: 664px;
background: var(--color-white);
}
.contact-page__title {
position: absolute;
top: 58px;
left: max(calc((100% - 1280px) / 2 + 66px), var(--container-gutter));
margin: 0;
font-size: 70px;
font-weight: var(--font-thin);
line-height: 70px;
color: var(--color-black);
}
.contact-page__intro {
position: absolute;
top: 229px;
left: max(calc((100% - 1280px) / 2 + 69px), var(--container-gutter));
width: 418px;
margin: 0;
font-size: 25px;
font-weight: var(--font-thin);
line-height: 25px;
}
.contact-page__lines {
position: absolute;
top: 100px;
left: calc(50% - 25px);
display: block;
width: 573px;
height: 19px;
}
.contact-page__form-column {
position: absolute;
top: 218px;
left: calc(50% - 25px);
width: 573px;
height: 423.109px;
}
.contact-page .home-contact__form-wrap {
width: 573px;
height: 423.109px;
margin: 0;
}
.contact-page .home-contact-form__field {
height: 45.25px;
font-size: 23.72px;
}
.contact-page .home-contact-form__field:nth-of-type(2) {
height: 40px;
}
.contact-page .home-contact-form__field:nth-of-type(4) {
height: 43.94px;
}
.contact-page .home-contact-form__field:nth-of-type(5) {
height: 46.58px;
}
.contact-page .home-contact-form__field--message {
height: 158.16px;
}
.contact-page .home-contact-form__actions {
top: 370.93px;
}
.contact-page .home-contact-form__submit {
width: 145.045px;
height: 31.465px;
font-size: 23.02px;
}
.contact-page__map-section {
position: relative;
height: 817px;
padding-top: 114px;
overflow: hidden;
background: #b3b3b3;
}
.contact-page__map {
position: relative;
z-index: 1;
width: calc(100% - 164px);
max-width: 1106px;
height: 599px;
margin-inline: auto;
background: var(--color-white);
}
.contact-page__map iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.contact-page__decoration {
position: absolute;
bottom: 0;
left: 50%;
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 100vw;
height: 32px;
overflow: hidden;
transform: translateX(-50%);
}
.contact-page__decoration-item {
display: flex;
align-items: flex-start;
justify-content: center;
height: 327.457px;
}
.contact-page__decoration-item img {
flex: 0 0 auto;
width: 327.457px;
height: 426.81px;
max-width: none;
transform: rotate(-90deg) scaleY(-1);
}
@media (max-width: 63.9375rem) {
.contact-page__top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
gap: var(--space-8);
height: auto;
padding: var(--space-9) var(--container-gutter);
}
.contact-page__title,
.contact-page__intro,
.contact-page__lines,
.contact-page__form-column {
position: static;
}
.contact-page__title {
grid-column: 1;
font-size: clamp(3rem, 7vw, 4.375rem);
}
.contact-page__intro {
grid-column: 1;
width: auto;
}
.contact-page__lines,
.contact-page__form-column {
grid-column: 2;
width: 100%;
}
.contact-page__lines {
align-self: end;
height: auto;
}
.contact-page__form-column,
.contact-page .home-contact__form-wrap {
width: 100%;
}
.contact-page__map {
width: calc(100% - (2 * var(--container-gutter)));
}
}
@media (max-width: 47.9375rem) {
.contact-page__top {
display: flex;
flex-direction: column;
gap: var(--space-7);
padding: var(--space-8) 20px var(--space-10);
}
.contact-page__title {
font-size: clamp(3rem, 15vw, 4.375rem);
line-height: 1;
}
.contact-page__intro {
font-size: 1.25rem;
line-height: 1.3;
}
.contact-page__form-column,
.contact-page .home-contact__form-wrap {
height: 30rem;
}
.contact-page .home-contact-form__field {
height: 2.9375rem;
font-size: 1.125rem;
}
.contact-page .home-contact-form__field--message {
height: 12rem;
}
.contact-page .home-contact-form__field--message label {
white-space: normal;
}
.contact-page .home-contact-form__actions {
top: auto;
bottom: 0;
}
.contact-page__map-section {
height: 552px;
padding-top: 40px;
}
.contact-page__map {
width: calc(100% - 40px);
height: 460px;
}
.contact-page__decoration {
height: 32px;
}
}