@font-face { font-family: "General Sans"; src: url("/font/first-page-v2/GeneralSans-Regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: "General Sans"; src: url("/font/first-page-v2/GeneralSans-Medium.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; } @font-face { font-family: "General Sans"; src: url("/font/first-page-v2/GeneralSans-Semibold.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; } @font-face { font-family: "General Sans"; src: url("/font/first-page-v2/GeneralSans-Bold.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; } *, *::before, *::after { box-sizing: border-box; } html { background: #111; color: #111; font-family: "General Sans", Arial, sans-serif; font-size: 16px; scroll-behavior: auto; -webkit-text-size-adjust: 100%; } body { margin: 0; min-width: 20rem; overflow-x: clip; } body, button, a { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { border: 0; padding: 0; color: inherit; background: none; } button:not(:disabled), a[href] { cursor: pointer; } ::selection { color: #fff; background: #111; } :focus-visible { outline: .125rem solid currentColor; outline-offset: .25rem; } html.fpv2-menu-open, html.fpv2-menu-open body { overflow: hidden; } @media only screen and (min-width: 0px) and (max-width: 500px) and (orientation: portrait) and (pointer: coarse) { html { --device: mobileP; font-size: clamp(0px, 3.80952380952381vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (min-width: 0px) and (max-width: 900px) and (orientation: landscape) and (pointer: coarse) { html { --device: mobileL; font-size: clamp(0px, 1.3vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (min-width: 501px) and (max-width: 2500px) and (orientation: portrait) and (pointer: coarse) { html { --device: tabletP; font-size: clamp(0px, 1.2vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (min-width: 901px) and (max-width: 2900px) and (orientation: landscape) and (pointer: coarse) { html { --device: tabletL; font-size: clamp(0px, 1.2vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (pointer: fine) { html { font-size: clamp(0px, 1.11111111111vw, 16px); } } @media only screen and (pointer: fine) and (orientation: landscape) { html { --device: desktopL; } } @media only screen and (pointer: fine) and (orientation: portrait) { html { --device: desktopP; } } html:has(.aboutV2) { scrollbar-gutter: stable; background: #fff; } .aboutV2 { --about-black: #111111; --about-white: #ffffff; --about-muted: #555555; --about-ghost: #f0f0f0; position: relative; isolation: isolate; overflow: clip; color: var(--about-black); background: var(--about-white); font-family: "General Sans", Arial, sans-serif; } .aboutV2 *, .aboutV2 *::before, .aboutV2 *::after { box-sizing: border-box; } /* Keep the first paint completely white. JS removes this guard only after * every Figma/scroll initial state has been installed, preventing a flash of * the title, quote or team content while animation libraries are loading. */ .aboutV2:not([data-about-motion-ready="true"]) .aboutV2__title, .aboutV2:not([data-about-motion-ready="true"]) .aboutV2__quote-mark, .aboutV2:not([data-about-motion-ready="true"]) .aboutV2__quote, .aboutV2:not([data-about-motion-ready="true"]) .aboutV2__team { visibility: hidden; } .aboutV2__main { position: relative; z-index: 1; } .aboutV2__story { position: relative; height: 2000svh; background: var(--about-white); } .aboutV2__scene { position: sticky; top: 0; width: 100%; height: 100svh; overflow: hidden; color: var(--about-black); background: var(--about-white); will-change: background-color; } .aboutV2__title, .aboutV2__quote-mark, .aboutV2__quote p, .aboutV2__ceo, .aboutV2__team h2, .aboutV2__row, .aboutV2__brand-build { position: absolute; z-index: 2; margin: 0; will-change: transform, opacity, color; } .aboutV2__title { left: 2.5rem; top: 0; font-size: 9.625rem; font-weight: 600; line-height: 9.25rem; letter-spacing: -.045em; text-transform: uppercase; white-space: nowrap; } .aboutV2__title-letter { display: inline-block; transform-origin: 50% 50%; will-change: transform; } .aboutV2__intro-wall { position: absolute; z-index: 3; inset: 0; background: var(--about-white); pointer-events: none; will-change: transform, opacity; } .aboutV2__quote { margin: 0; padding: 0; border: 0; } .aboutV2__quote-mark { left: 50%; top: 0; font-size: 15.625rem; font-weight: 600; line-height: 9.25rem; transform: translateX(-50%); } .aboutV2__quote p { left: 3.375rem; top: 0; width: calc(100% - 6.75rem); max-width: 84.3125rem; font-size: 2.875rem; font-weight: 500; line-height: 3.75rem; color: var(--about-muted); } .aboutV2__quote-word { color: inherit; will-change: color; } .aboutV2__ceo { left: 0; top: 0; width: 100%; height: 3.75rem; color: inherit; font-size: 2.875rem; font-style: normal; font-weight: 500; line-height: 3.75rem; } .aboutV2__ceo span, .aboutV2__row span, .aboutV2__brand-build span { position: absolute; left: 50%; top: 0; display: block; transform: translateX(-50%); will-change: transform, opacity, color; } .aboutV2__row span[data-about-brand-source] { z-index: 4; transform-origin: 50% 50%; } .aboutV2__team { position: absolute; inset: 0; } .aboutV2__team h2 { left: 50%; top: 0; font-size: 6.25rem; font-weight: 600; line-height: 6.875rem; letter-spacing: -.035em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); } .aboutV2__member { position: absolute; inset: 0; pointer-events: none; } .aboutV2__row, .aboutV2__brand-build { left: 0; top: 0; width: 100%; height: 3.75rem; font-size: 2.875rem; font-weight: 500; line-height: 3.75rem; text-transform: uppercase; } .aboutV2__brand-build { z-index: 8; color: var(--about-black); pointer-events: none; } .aboutV2__brand-build span { left: 0; } @media only screen and (hover: none) and (pointer: coarse) { .aboutV2__story { /* Keep every timeline unit mapped to the same scroll distance as the * desktop composition. A shorter mobile track made identical gestures * advance the animation noticeably faster. */ height: 2000svh; } .aboutV2__title { left: 1.365rem; font-size: 4.9rem; line-height: 4.75rem; } .aboutV2__quote-mark { font-size: 8.75rem; line-height: 5.25rem; } .aboutV2__quote p { left: 1.365rem; width: calc(100% - 2.73rem); font-size: 1.96875rem; line-height: 2.625rem; } .aboutV2__ceo, .aboutV2__row, .aboutV2__brand-build { height: 2.75rem; font-size: 2.1rem; line-height: 2.75rem; } .aboutV2__team h2 { font-size: 4.1rem; line-height: 4.35rem; } } @media (prefers-reduced-motion: reduce) { .aboutV2__story { height: auto; } .aboutV2__scene { position: relative; display: flex; flex-direction: column; gap: 4rem; min-height: 100svh; height: auto; padding: 10rem 2.5rem 7rem; overflow: visible; background: var(--about-white) !important; } .aboutV2__title, .aboutV2__intro-wall, .aboutV2__quote-mark, .aboutV2__quote p, .aboutV2__ceo, .aboutV2__team, .aboutV2__team h2, .aboutV2__member, .aboutV2__row, .aboutV2__brand-build { position: relative; inset: auto; opacity: 1 !important; visibility: visible !important; color: var(--about-black) !important; transform: none !important; } .aboutV2__intro-wall { display: none; } .aboutV2__quote-mark { display: none; } .aboutV2__quote p { width: 100%; max-width: none; } .aboutV2__ceo, .aboutV2__team h2, .aboutV2__brand-build { display: none; } .aboutV2__team { display: grid; gap: 2rem; } .aboutV2__member { display: grid; gap: .25rem; } .aboutV2__row { display: flex; gap: .35em; width: auto; height: auto; } .aboutV2__row span { position: static; transform: none !important; } } html.menuV2-open { overflow: hidden; scrollbar-gutter: stable; } .menuV2 { --menu-v2-black: #111111; --menu-v2-white: #ffffff; --menu-v2-header: 4.8125rem; position: fixed; z-index: 1000; inset: 0 0 auto 0; color: var(--menu-v2-black); font-family: "General Sans", Arial, sans-serif; } .menuV2 *, .menuV2 *::before, .menuV2 *::after { box-sizing: border-box; } .menuV2__bar { position: relative; display: grid; grid-template-columns: minmax(8.5rem, 1fr) minmax(5rem, .8fr) minmax(9rem, 1.25fr) minmax(5rem, .8fr) minmax(4.5rem, 1fr); align-items: center; height: var(--menu-v2-header); padding-inline: 2.5rem 1rem; background: rgba(255, 255, 255, .93); backdrop-filter: blur(.3125rem); -webkit-backdrop-filter: blur(.3125rem); } .menuV2__mobile-strip { display: none; } .menuV2__cta { justify-self: start; color: inherit; font-size: 1.25rem; font-weight: 600; line-height: 1.08; text-decoration: none; text-transform: uppercase; } .menuV2__cta span { display: block; } .menuV2__utility { position: relative; display: inline-grid; grid-template-rows: 1.375rem .5rem; justify-items: center; align-items: center; justify-self: center; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.375rem; text-transform: uppercase; cursor: pointer; } .menuV2__utility i { width: .5rem; height: .5rem; margin-top: -.0625rem; border-radius: .125rem; background: var(--menu-v2-black); transform: rotate(45deg); transition: transform .25s cubic-bezier(.22, 1, .36, 1); } .menuV2__utility:hover i, .menuV2__utility[aria-expanded="true"] i { transform: rotate(45deg) translate(.125rem, .125rem); } .menuV2__logo { display: block; justify-self: center; width: 11.5rem; } .menuV2__logo img { display: block; width: 100%; height: auto; } .menuV2__menu-button { justify-self: end; width: 4.125rem; height: 3.375rem; overflow: hidden; padding: 0; border: 0; background: transparent; cursor: pointer; } .menuV2__menu-button img { display: block; width: 100%; height: 100%; object-fit: contain; } .menuV2__visually-hidden { position: absolute !important; width: .0625rem !important; height: .0625rem !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; } .menuV2__mini-panel { --menu-v2-panel-width: 17.625rem; position: absolute; z-index: 1010; top: var(--menu-v2-panel-top, calc(var(--menu-v2-header) + .75rem)); left: var(--menu-v2-panel-left, 24%); width: var(--menu-v2-panel-width); padding: 1.125rem; border-radius: 1.875rem; background: rgba(240, 240, 240, .94); box-shadow: 0 1.125rem 2.8125rem rgba(17, 17, 17, .055); backdrop-filter: blur(.9375rem); -webkit-backdrop-filter: blur(.9375rem); font-size: .8125rem; font-weight: 600; line-height: 1; text-transform: uppercase; transform-origin: top center; } .menuV2__social-panel { display: grid; grid-template-columns: max-content max-content; align-content: start; justify-content: start; gap: .5rem; min-height: 6.25rem; } .menuV2__language-panel { --menu-v2-panel-width: 17.75rem; min-height: 13.75rem; } .menuV2__mini-panel a { display: block; padding: .4rem .625rem .35rem; border-radius: 999rem; color: #aaa; background: rgba(255, 255, 255, .98); text-decoration: none; white-space: nowrap; transition: color .2s ease, transform .2s ease; } .menuV2__mini-panel a:hover, .menuV2__mini-panel a:focus-visible { color: var(--menu-v2-black); outline: none; transform: translateY(-.0625rem); } .menuV2__language-search { display: block; width: 100%; margin-bottom: .625rem; } .menuV2__language-search input { display: block; width: 100%; height: 1.8125rem; margin: 0; padding: .3125rem .625rem .25rem; border: 0; border-radius: 999rem; outline: 0; color: var(--menu-v2-black); background: rgba(255, 255, 255, .98); font: inherit; text-transform: uppercase; appearance: none; } .menuV2__language-search input::placeholder { color: #bebebe; opacity: 1; } .menuV2__language-options { display: grid; grid-template-columns: repeat(3, max-content); align-items: start; justify-content: start; gap: .5rem .4375rem; } .menuV2__language-options a[hidden], .menuV2__mini-panel[hidden], .menuV2__overlay[hidden] { display: none !important; } .menuV2__overlay { position: fixed; z-index: 1005; inset: 0; display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; color: var(--menu-v2-black); background: var(--menu-v2-white); } .menuV2__nav { display: flex; flex-direction: column; justify-content: space-evenly; padding: 1.25rem 3.875rem 2rem; } .menuV2__nav a { display: flex; align-items: center; width: 100%; flex: 1 1 0; border-bottom: .0625rem solid rgba(17, 17, 17, .22); color: inherit; font-size: 6.25rem; font-weight: 600; line-height: 1; letter-spacing: -.045em; text-decoration: none; } .menuV2__nav a:last-child { border-bottom: 0; } .menuV2__nav a:hover { color: rgba(17, 17, 17, .48); } .menuV2__visual { position: relative; overflow: hidden; border-radius: 1.875rem 1.875rem 0 0; background: rgba(240, 240, 240, .97); backdrop-filter: blur(.9375rem); -webkit-backdrop-filter: blur(.9375rem); } .menuV2__diamond { position: absolute; top: 22.6%; left: 50%; width: 23.375rem; opacity: .14; transform: translateX(-50%); } .menuV2__consultation { position: absolute; bottom: 5.4%; left: 8%; max-width: 78%; color: inherit; font-size: 4rem; font-weight: 600; line-height: 1.16; text-decoration: none; } .menuV2__socials { position: absolute; right: 2.4%; bottom: 5.2%; display: flex; flex-direction: column-reverse; gap: 2.75rem; } .menuV2__socials a { display: grid; place-items: center; width: 4.4375rem; height: 4.4375rem; } .menuV2__socials img { width: 100%; height: 100%; object-fit: contain; } .menuV2__close { position: absolute; z-index: 4; top: 1.25rem; right: 1.5rem; width: 3.625rem; height: 3.625rem; border: 0; background: transparent; cursor: pointer; } .menuV2__close::before, .menuV2__close::after { position: absolute; top: 50%; left: 50%; width: 2.8125rem; height: .125rem; content: ""; background: var(--menu-v2-black); } .menuV2__close::before { transform: translate(-50%, -50%) rotate(45deg); } .menuV2__close::after { transform: translate(-50%, -50%) rotate(-45deg); } @media only screen and (hover: none) and (pointer: coarse) { .menuV2 { --menu-v2-header: 3.25rem; } .menuV2__mobile-strip { position: relative; z-index: 1020; display: flex; align-items: center; justify-content: space-between; height: 1.75rem; padding-inline: 1.18125rem; background: rgba(255, 255, 255, .95); backdrop-filter: blur(.3125rem); -webkit-backdrop-filter: blur(.3125rem); } .menuV2__mobile-strip > div { display: flex; align-items: center; gap: .853125rem; } .menuV2__mobile-strip a { width: 1rem; height: 1rem; } .menuV2__mobile-strip img { width: 100%; height: 100%; object-fit: contain; } .menuV2__mobile-strip button { padding: 0; border: 0; color: inherit; background: transparent; font-size: .75rem; font-weight: 600; text-transform: uppercase; } .menuV2__bar { grid-template-columns: 1fr auto 1fr; height: var(--menu-v2-header); padding-inline: 1.18125rem .65625rem; } .menuV2__cta, .menuV2__social, .menuV2__language { display: none; } .menuV2__logo { grid-column: 2; width: 8.925rem; } .menuV2__menu-button { position: relative; grid-column: 3; width: 3.4125rem; height: 3.15rem; } .menuV2.is-open .menuV2__menu-button img { opacity: 0; } .menuV2.is-open .menuV2__menu-button::before, .menuV2.is-open .menuV2__menu-button::after { position: absolute; top: 50%; left: 50%; width: 2.23125rem; height: .125rem; content: ""; background: var(--menu-v2-black); } .menuV2.is-open .menuV2__menu-button::before { transform: translate(-50%, -50%) rotate(45deg); } .menuV2.is-open .menuV2__menu-button::after { transform: translate(-50%, -50%) rotate(-45deg); } .menuV2__mini-panel { --menu-v2-panel-width: min(17.75rem, calc(100% - 2rem)); border-radius: 1.575rem; } .menuV2__overlay { top: 5.7875rem; bottom: auto; display: block; min-height: 0; max-height: calc(100svh - 6rem); height: auto; overflow-y: auto; border-radius: 0 0 1.8375rem 1.8375rem; color: #a8a8a8; background: rgba(240, 240, 240, .97); box-shadow: 0 1.125rem 2.625rem rgba(17, 17, 17, .08); backdrop-filter: blur(.9375rem); -webkit-backdrop-filter: blur(.9375rem); } .menuV2__nav { display: block; padding: .65625rem 1.365rem .7875rem; } .menuV2__nav a { display: block; width: 100%; border-bottom: .0625rem solid rgba(168, 168, 168, .42); font-size: 2.3625rem; font-weight: 600; line-height: 1.45; letter-spacing: -.035em; text-align: center; } .menuV2__nav a:last-child { border-bottom: 0; } .menuV2__visual, .menuV2__close { display: none; } } .footerV2 { position: relative; z-index: 2; height: 155svh; overflow: clip; color: #111111; background: #ffffff; font-family: "General Sans", Arial, sans-serif; } .footerV2 *, .footerV2 *::before, .footerV2 *::after { box-sizing: border-box; } .footerV2__scene { position: sticky; top: 0; width: min(100%, 90rem); height: 100svh; margin-inline: auto; overflow: hidden; } .footerV2__links { position: absolute; z-index: 2; inset: 0; font-size: 1.375rem; font-weight: 400; line-height: 1.75rem; text-transform: uppercase; will-change: transform, opacity; } .footerV2__links nav, .footerV2__links address { position: absolute; display: flex; flex-direction: column; gap: .3125rem; margin: 0; font-style: normal; white-space: nowrap; } .footerV2__links a { color: inherit; text-decoration: none; } .footerV2__links a:hover { text-decoration: underline; text-underline-offset: .1875rem; } .footerV2__nav--primary { top: 25.5625rem; left: 6rem; } .footerV2__nav--secondary { top: 27.625rem; left: 15.9375rem; } .footerV2__nav--social { top: 27.625rem; left: 23.75rem; } .footerV2__contact { top: 25.5625rem; right: 2.8125rem; width: 16.4375rem; } .footerV2__brand { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .footerV2__brand-slice { position: absolute; bottom: 7rem; display: block; height: 15.6875rem; overflow: hidden; will-change: transform; } .footerV2__brand-slice img { position: absolute; top: 0; display: block; width: 79.235rem; max-width: none; height: 15.6875rem; } .footerV2__brand-slice--b { left: 6rem; width: 11.5rem; } .footerV2__brand-slice--b img { left: -.08375rem; } .footerV2__brand-slice--i { left: 17.5rem; width: 4.4375rem; } .footerV2__brand-slice--i img { left: -11.58375rem; } .footerV2__brand-slice--d { left: 21.9375rem; width: 11.25rem; } .footerV2__brand-slice--d img { left: -16.02125rem; } .footerV2__brand-slice--o { left: 34.25rem; width: 11.578125rem; } .footerV2__brand-slice--o img { left: -27.270625rem; } .footerV2__brand-slice--t { left: 45.828125rem; width: 7.296875rem; } .footerV2__brand-slice--t img { left: -38.84875rem; } .footerV2__brand-slice--e { left: 53.125rem; width: 11.5rem; } .footerV2__brand-slice--e img { left: -46.14625rem; } .footerV2__brand-slice--c { left: 64.625rem; width: 11rem; } .footerV2__brand-slice--c img { left: -57.646875rem; } .footerV2__brand-slice--h { left: 76.6875rem; width: 10.5rem; } .footerV2__brand-slice--h img { left: -68.645625rem; } @media only screen and (hover: none) and (pointer: coarse) { .footerV2 { --footerV2-mobile-safe-bottom: max(1.5rem, env(safe-area-inset-bottom, 0rem)); --footerV2-mobile-logo-height: 4.7015rem; --footerV2-mobile-group-gap: 1.25rem; --footerV2-mobile-two-gaps: 2.5rem; --footerV2-mobile-three-gaps: 3.75rem; --footerV2-mobile-three-lines: 6.1382rem; --footerV2-mobile-four-lines: 8.2931rem; } .footerV2__links { font-size: 1.4366rem; line-height: 1.8284rem; } .footerV2__links nav, .footerV2__links address { gap: .3265rem; } .footerV2__nav--primary, .footerV2__nav--secondary { top: auto; bottom: calc( var(--footerV2-mobile-safe-bottom) + var(--footerV2-mobile-logo-height) + var(--footerV2-mobile-four-lines) + var(--footerV2-mobile-three-lines) + var(--footerV2-mobile-three-gaps) ); } .footerV2__nav--primary { left: 1.1101rem; } .footerV2__nav--secondary { left: 14.6922rem; } .footerV2__nav--social { top: auto; bottom: calc( var(--footerV2-mobile-safe-bottom) + var(--footerV2-mobile-logo-height) + var(--footerV2-mobile-four-lines) + var(--footerV2-mobile-two-gaps) ); left: 1.1101rem; } .footerV2__contact { top: auto; right: auto; bottom: calc( var(--footerV2-mobile-safe-bottom) + var(--footerV2-mobile-logo-height) + var(--footerV2-mobile-group-gap) ); left: 1.1101rem; width: min(22rem, calc(100% - 2.2202rem)); } .footerV2__brand { top: auto; right: 1.4366rem; bottom: var(--footerV2-mobile-safe-bottom); left: 1.3713rem; height: var(--footerV2-mobile-logo-height); } .footerV2__brand-slice { top: 0; bottom: auto; height: 4.7015rem; } .footerV2__brand-slice img { top: 0; width: 23.443rem; height: 4.7015rem; } .footerV2__brand-slice--b { left: 0; width: 3.423rem; } .footerV2__brand-slice--b img { left: 0; } .footerV2__brand-slice--i { left: 3.423rem; width: 1.312rem; } .footerV2__brand-slice--i img { left: -3.423rem; } .footerV2__brand-slice--d { left: 4.735rem; width: 3.33rem; } .footerV2__brand-slice--d img { left: -4.735rem; } .footerV2__brand-slice--o { left: 8.065rem; width: 3.421rem; } .footerV2__brand-slice--o img { left: -8.065rem; } .footerV2__brand-slice--t { left: 11.486rem; width: 2.173rem; } .footerV2__brand-slice--t img { left: -11.486rem; } .footerV2__brand-slice--e { left: 13.659rem; width: 3.408rem; } .footerV2__brand-slice--e img { left: -13.659rem; } .footerV2__brand-slice--c { left: 17.067rem; width: 3.25rem; } .footerV2__brand-slice--c img { left: -17.067rem; } .footerV2__brand-slice--h { left: 20.317rem; width: 3.126rem; } .footerV2__brand-slice--h img { left: -20.317rem; } } @media (prefers-reduced-motion: reduce) { .footerV2 { height: 100svh; } .footerV2__scene { position: relative; } }