@font-face { font-family: "Satoshi"; src: url("assets/fonts/Satoshi-Latin.bcd7bb654e04.woff2") format("woff2-variations"); font-style: normal; font-weight: 300 900; font-display: swap; } @font-face { font-family: "Inter"; src: url("assets/fonts/Inter-Latin.60c196819fa9.woff2") format("woff2-variations"); font-style: normal; font-weight: 100 900; font-display: swap; } :root { --color-sovereign: #173638; --color-charcoal: #0B1011; --color-slate: #173638; --color-mist: #78928E; --color-fog: #F2F7F5; --color-signal: #008F8A; --color-line: rgba(242, 247, 245, 0.18); --color-line-strong: rgba(242, 247, 245, 0.35); --content-max: 1440px; --gutter: clamp(20px, 3.6vw, 64px); --grid-edge: max(var(--gutter), calc((100vw - var(--content-max)) / 2 + var(--gutter))); --section-space: clamp(88px, 8.5vw, 136px); --font-display: "Satoshi", "Helvetica Neue", Arial, sans-serif; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); } *, *::before, *::after { box-sizing: border-box; } html { font-size: clamp(100%, 0.32vw + 0.82rem, 112.5%); background: var(--color-charcoal); color-scheme: dark; scroll-behavior: smooth; } body { margin: 0; min-width: 0; overflow-x: clip; background: var(--color-charcoal); color: var(--color-fog); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body, button { font-family: var(--font-body); } img, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { color: inherit; } h1, h2, h3, p, figure, ol, ul { margin: 0; } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.035em; text-wrap: balance; } h1, h2, h3, p, span { min-width: 0; overflow-wrap: anywhere; } h1, h2, h3 { overflow-wrap: break-word; } :focus-visible { outline: 2px solid var(--color-mist); outline-offset: 5px; } .container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } .skip-link { position: fixed; z-index: 1000; top: 16px; left: 16px; padding: 10px 16px; translate: 0 -200%; background: var(--color-fog); color: var(--color-charcoal); } .skip-link:focus { translate: 0; } .site-header { --nav-height: 56px; position: fixed; z-index: 100; inset: 0 0 auto; padding: 12px var(--gutter) 0; pointer-events: none; } .site-nav { display: grid; grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr); align-items: center; gap: clamp(20px, 3vw, 48px); max-width: calc(var(--content-max) - 2 * var(--gutter)); height: var(--nav-height); margin-inline: auto; padding: 0 7px 0 22px; border: 1px solid rgba(242, 247, 245, 0.14); border-radius: 999px; background: rgba(11, 16, 17, 0.42); box-shadow: inset 0 1px 0 rgba(242, 247, 245, 0.08), 0 12px 40px rgba(0, 0, 0, 0.22); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); pointer-events: auto; transition: background-color 240ms var(--ease-in-out-cubic), border-color 240ms var(--ease-in-out-cubic), box-shadow 240ms var(--ease-in-out-cubic); } .site-header.is-light .site-nav { border-color: rgba(255, 255, 255, 0.72); background: rgba(255, 255, 255, 0.58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 40px rgba(11, 16, 17, 0.1); } .brand { display: inline-flex; width: fit-content; } .brand-lockup { position: relative; display: block; width: clamp(124px, 10vw, 148px); aspect-ratio: 2820 / 808; } .brand-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .brand-logo-light { transition: opacity 240ms ease; } .site-header.is-light .brand-logo-light { opacity: 0; } .nav-links { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 40px); padding: 0; list-style: none; color: rgba(242, 247, 245, 0.78); font-size: 0.9rem; transition: color 240ms ease; } .site-header.is-light .nav-links { color: rgba(11, 16, 17, 0.66); } .nav-links a { transition: color 150ms ease; } .demo-button { justify-self: end; min-height: 42px; padding: 10px 20px; border: 0; border-radius: 999px; background: var(--color-fog); color: var(--color-charcoal); font-size: 0.86rem; font-weight: 500; line-height: 1; white-space: nowrap; transition: color 240ms ease, background-color 240ms ease; } .site-header.is-light .demo-button, .site-footer .demo-button { background: var(--color-charcoal); color: var(--color-fog); } .demo-button:disabled { cursor: not-allowed; opacity: 0.82; } .hero { position: relative; display: flex; min-height: max(760px, 100svh); overflow: hidden; isolation: isolate; background: var(--color-charcoal); } .hero-media, .hero-video, .hero-fallback, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-media { z-index: -3; } .hero-fallback, .hero-video { object-fit: cover; object-position: 50% 52%; } .hero-video { z-index: 1; filter: saturate(0.78) brightness(0.88); opacity: 0; transition: opacity 700ms ease; } .hero-video.is-playing { opacity: 1; } .hero-fallback { z-index: 0; } .hero-shade { z-index: -2; background: linear-gradient(180deg, rgba(11, 16, 17, 0.2) 8%, rgba(11, 16, 17, 0.12) 32%, rgba(11, 16, 17, 0.88) 100%), linear-gradient(90deg, rgba(11, 16, 17, 0.64) 0%, rgba(11, 16, 17, 0.08) 58%, rgba(11, 16, 17, 0.34) 100%); } .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; padding-top: 190px; padding-bottom: clamp(42px, 5vw, 72px); } .hero-message { max-width: 1060px; min-width: 0; } .hero-context, .section-kicker, .solution-phase { color: var(--color-signal); font-size: 0.73rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .hero-context { margin-bottom: 24px; color: rgba(242, 247, 245, 0.72); } .hero h1 { max-width: 1050px; font-size: clamp(3rem, 6.8vw, 6.7rem); line-height: 0.94; letter-spacing: -0.055em; } .hero-support { display: grid; grid-template-columns: minmax(0, 570px) 1fr; align-items: end; gap: 48px; margin-top: clamp(38px, 5vw, 70px); padding-top: 24px; border-top: 1px solid var(--color-line-strong); color: rgba(242, 247, 245, 0.76); } .hero-support > p:first-child { max-width: 54ch; font-size: clamp(1rem, 1.35vw, 1.2rem); } .hero-scope { justify-self: end; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; } .section { padding-block: var(--section-space); } .section-heading { max-width: 980px; margin-bottom: clamp(64px, 8vw, 104px); } .section-heading h2, .method-content h2, .labs-heading h2, .company-copy h2 { margin-top: 18px; font-size: clamp(2.8rem, 5vw, 5.2rem); line-height: 0.98; } .method-content h2 { font-size: clamp(2.8rem, 4.4vw, 4.4rem); } .section-heading-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr); align-items: end; gap: clamp(36px, 6vw, 88px); max-width: none; } .section-intro { max-width: 58ch; color: rgba(242, 247, 245, 0.64); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.75; } .solutions { background: var(--color-charcoal); } .solution-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); } .solution-layer { min-width: 0; min-height: 390px; padding: 38px clamp(26px, 3vw, 44px) 42px 0; } .solution-layer + .solution-layer { padding-left: clamp(26px, 3vw, 44px); border-left: 1px solid var(--color-line); } .solution-layer:last-child { padding-right: 0; } .solution-layer h3 { margin-top: clamp(100px, 10vw, 146px); font-size: clamp(1.9rem, 2.4vw, 2.6rem); line-height: 1.03; } .solution-layer > p:last-child { max-width: 39ch; margin-top: 24px; color: rgba(242, 247, 245, 0.62); } .method-section { --method-bg: var(--color-slate); position: relative; display: flex; min-height: clamp(680px, 54vw, 860px); overflow: hidden; isolation: isolate; background: var(--method-bg); } .method-image { position: absolute; z-index: -1; inset: 0 auto 0 0; width: 66%; } .method-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 44%, rgba(23, 54, 56, 0.72) 74%, var(--method-bg) 94%), linear-gradient(180deg, rgba(23, 54, 56, 0.35) 0%, transparent 18%, transparent 82%, rgba(23, 54, 56, 0.45) 100%); pointer-events: none; } .method-image img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 50%; } .method-frame { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } .method-content { grid-column: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 56px; min-width: 0; padding-block: clamp(72px, 6.5vw, 112px); } .method-content .section-intro { margin-top: 34px; } .method-list { padding: 0; border-top: 1px solid var(--color-line); list-style: none; } .method-list li { display: grid; grid-template-columns: 52px 1fr; gap: 22px; padding-block: 20px; border-bottom: 1px solid var(--color-line); color: rgba(242, 247, 245, 0.76); } .method-list span { color: var(--color-signal); font-size: 0.72rem; } .use-cases { background: var(--color-fog); color: var(--color-charcoal); } .use-cases .section-kicker { color: var(--color-sovereign); } .use-cases .section-intro { color: var(--color-slate); } .use-case-grid { display: flex; gap: 2px; height: clamp(540px, 44vw, 700px); background: var(--color-mist); } .use-case { --panel-ease: cubic-bezier(0.22, 1, 0.36, 1); position: relative; display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; overflow: hidden; isolation: isolate; background: var(--color-fog); cursor: default; transition: flex-grow 760ms var(--panel-ease), background-color 240ms ease; } .use-case.is-active { flex-grow: 1.8; background: var(--color-charcoal); } .use-case-trigger { display: none; } .js .use-case-trigger { display: block; position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 0; } .use-case-trigger:focus-visible { outline-offset: -5px; outline-color: var(--color-signal); } .use-case img, .use-case-shade { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; } .use-case img { object-fit: cover; object-position: 50% 50%; opacity: 0; filter: saturate(0.72) brightness(0.68); transform: scale(1.08); transition: opacity 520ms ease, transform 1200ms var(--panel-ease); } .use-case-shade { background: linear-gradient(180deg, rgba(11, 16, 17, 0.5) 0%, rgba(11, 16, 17, 0.06) 30%, rgba(11, 16, 17, 0.9) 100%); opacity: 0; transition: opacity 520ms ease; } .use-case.is-active img, .use-case.is-active .use-case-shade { opacity: 1; transform: none; } .use-case-copy { display: flex; flex: 1; flex-direction: column; justify-content: space-between; padding: clamp(26px, 2.6vw, 44px); } .use-case-label { color: var(--color-slate); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: color 240ms ease; } .use-case-body { width: min(100%, 26rem); } .use-case h3 { font-size: clamp(1.65rem, 2.2vw, 2.4rem); line-height: 1.06; transition: color 240ms ease; } .use-case span { display: block; margin-top: 18px; color: var(--color-slate); font-size: 0.92rem; line-height: 1.6; transition: color 240ms ease; } .use-case.is-active .use-case-label { color: rgba(242, 247, 245, 0.86); } .use-case.is-active h3 { color: var(--color-fog); } .use-case.is-active span { color: rgba(242, 247, 245, 0.74); } .labs-section { position: relative; min-height: 900px; padding-block: var(--section-space); overflow: hidden; isolation: isolate; background: var(--color-charcoal); } .labs-background, .labs-shade { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; } .labs-background { object-fit: cover; filter: grayscale(1) brightness(0.54); } .labs-shade { z-index: -1; background: linear-gradient(90deg, rgba(11, 16, 17, 0.96) 0%, rgba(11, 16, 17, 0.72) 48%, rgba(11, 16, 17, 0.18) 100%), linear-gradient(180deg, rgba(11, 16, 17, 0.18), rgba(11, 16, 17, 0.86)); } .labs-content { display: flex; flex-direction: column; justify-content: space-between; min-height: calc(900px - 2 * var(--section-space)); } .labs-heading { max-width: 850px; } .labs-heading > p:last-child { max-width: 50ch; margin-top: 28px; color: rgba(242, 247, 245, 0.68); font-size: 1.05rem; } .publication-list { margin-top: 90px; border-top: 1px solid var(--color-line-strong); } .publication-row { display: grid; grid-template-columns: minmax(160px, 0.75fr) minmax(0, 1.65fr) minmax(140px, 0.6fr); gap: clamp(24px, 4vw, 64px); align-items: center; min-width: 0; padding-block: 22px; border-bottom: 1px solid var(--color-line); } .publication-row h3 { font-family: var(--font-body); font-size: 0.98rem; font-weight: 560; letter-spacing: -0.01em; } .publication-row p, .publication-row span { color: rgba(242, 247, 245, 0.68); } .publication-row span { text-align: right; } .company { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); min-height: clamp(720px, 100svh, 980px); background: var(--color-sovereign); } .company-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(72px, 6.5vw, 112px) clamp(40px, 5vw, 88px) clamp(72px, 6.5vw, 112px) var(--grid-edge); } .company-copy .section-intro { margin-top: 32px; } .company .section-kicker { color: var(--color-fog); } .trust-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(48px, 5vw, 80px); } .trust-list article { min-width: 0; padding: 28px clamp(20px, 2.2vw, 34px) 32px; } .trust-list article:nth-child(odd) { padding-left: 0; } .trust-list article:nth-child(even) { border-left: 1px solid var(--color-line); } .trust-list article:nth-child(-n + 2) { border-bottom: 1px solid var(--color-line); } .trust-list h3 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; letter-spacing: -0.01em; } .trust-list p { margin-top: 12px; color: rgba(242, 247, 245, 0.6); font-size: 0.9rem; } .company-image { position: relative; min-height: 100%; overflow: hidden; background: var(--color-slate); } .company-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; filter: saturate(0.65) brightness(0.72); } .site-footer { padding-block: clamp(56px, 8vh, 80px) 36px; background: var(--color-fog); color: var(--color-charcoal); } .footer-main { display: grid; grid-template-columns: minmax(240px, 1.35fr) minmax(0, 3fr); gap: 48px; } .footer-brand { display: inline-flex; } .footer-brand svg { width: 150px; height: auto; } .footer-tagline { max-width: 22ch; margin-top: 22px; color: rgba(11, 16, 17, 0.64); font-size: 0.95rem; line-height: 1.55; } .footer-intro .demo-button { min-height: 48px; margin-top: 28px; padding-inline: 24px; font-size: 0.92rem; } .footer-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; } .footer-column h2 { color: rgba(11, 16, 17, 0.56); font-family: var(--font-body); font-size: 0.8rem; font-weight: 400; letter-spacing: 0; } .footer-column ul { display: grid; gap: 12px; margin-top: 22px; padding: 0; list-style: none; } .footer-column a, .footer-bottom a { color: rgba(11, 16, 17, 0.72); font-size: 0.9rem; transition: color 150ms ease; } .footer-bottom { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 48px; align-items: center; margin-top: clamp(48px, 7vh, 72px); padding-top: 24px; border-top: 1px solid rgba(11, 16, 17, 0.12); color: rgba(11, 16, 17, 0.58); font-size: 0.86rem; } .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 760ms var(--ease-out-quart) var(--reveal-delay, 0ms), transform 760ms var(--ease-out-quart) var(--reveal-delay, 0ms); } .js [data-reveal].is-visible { opacity: 1; transform: translateY(0); } .solution-layer:nth-child(2) { --reveal-delay: 90ms; } .solution-layer:nth-child(3) { --reveal-delay: 180ms; } .js .hero-context, .js .hero h1, .js .hero-support { animation: hero-enter 1000ms var(--ease-out-expo) both; } .js .hero h1 { animation-delay: 70ms; } .js .hero-support { animation-delay: 170ms; } @keyframes hero-enter { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } } @media (hover: hover) { .nav-links a:hover { color: var(--color-fog); } .site-header.is-light .nav-links a:hover { color: var(--color-charcoal); } .footer-column a:hover, .footer-bottom a:hover { color: var(--color-charcoal); } .demo-button:not(:disabled):hover { background: var(--color-signal); color: var(--color-charcoal); } } @media (min-width: 861px) and (min-height: 600px) { :root { --screen-top: clamp(92px, 12.5vh, 128px); --screen-bottom: clamp(36px, 6vh, 72px); --screen-heading: clamp(2.6rem, min(4.8vw, 8.6vh), 5.2rem); } .section { display: flex; flex-direction: column; min-height: 100svh; padding-block: var(--screen-top) var(--screen-bottom); } .section > .container { display: flex; flex: 1; flex-direction: column; } .section-heading { margin-bottom: clamp(28px, 5vh, 64px); } .section-heading h2, .labs-heading h2, .company-copy h2 { font-size: var(--screen-heading); } .method-content h2 { font-size: clamp(2.6rem, min(4.2vw, 7.8vh), 4.4rem); } .solution-grid { flex: 1; min-height: 240px; } .solution-layer { display: flex; flex-direction: column; min-height: 0; padding-block: clamp(24px, 4vh, 38px) clamp(26px, 4.5vh, 42px); } .solution-layer h3 { margin-top: auto; padding-top: 32px; } .solution-layer > p:last-child { min-height: 6.4em; } .method-section, .company { min-height: 100svh; } .method-content { gap: clamp(28px, 5vh, 56px); padding-block: var(--screen-top) var(--screen-bottom); } .method-content .section-intro, .company-copy .section-intro { margin-top: clamp(18px, 3vh, 32px); } .method-list li { padding-block: clamp(12px, 2vh, 20px); } .use-case-grid { flex: 1; height: auto; min-height: 300px; } .labs-section { display: flex; min-height: 100svh; padding-block: var(--screen-top) var(--screen-bottom); } .labs-content { flex: 1; min-height: 0; } .publication-list { margin-top: clamp(32px, 6vh, 90px); } .publication-row { padding-block: clamp(14px, 2.2vh, 22px); } .company-copy { padding-block: var(--screen-top) clamp(24px, 4vh, 72px); } .company-copy h2 { font-size: clamp(2.6rem, min(4.8vw, 7.8vh), 5.2rem); } .trust-list { margin-top: clamp(22px, 4.5vh, 64px); } .trust-list article { padding-block: clamp(12px, 1.8vh, 24px) clamp(12px, 2vh, 28px); } .company { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .company-copy .section-intro, .trust-list p { line-height: 1.55; } .company-copy .section-intro { font-size: clamp(0.98rem, 2.3vh, 1.2rem); } .trust-list p { margin-top: clamp(6px, 1.2vh, 12px); font-size: clamp(0.8rem, 1.9vh, 0.9rem); } .hero { min-height: 100svh; } .hero-content { padding-top: clamp(110px, 18vh, 190px); padding-bottom: clamp(32px, 6vh, 72px); } .hero h1 { font-size: clamp(3rem, min(6.8vw, 11.5vh), 6.7rem); } .hero-support { margin-top: clamp(24px, 5vh, 70px); } } @media (min-width: 861px) and (min-height: 600px) and (max-height: 760px) { .method-content { gap: 24px; } .method-content h2 { font-size: clamp(2.6rem, 7.3vh, 4rem); } .method-list li { padding-block: 10px; } .company-copy h2 { font-size: clamp(2.6rem, 7.2vh, 4.2rem); } .trust-list { margin-top: 22px; } .trust-list h3 { font-size: 1rem; } } @media (max-width: 1040px) { .site-nav { grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; } .nav-links { justify-content: center; gap: 22px; } .method-image { width: 64%; } .method-frame { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .use-case.is-active { flex-grow: 1.5; } .company { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } } @media (max-width: 860px) { .site-header { --nav-height: 52px; position: absolute; padding-top: 10px; } .site-nav { grid-template-columns: minmax(0, 1fr) auto; padding-left: 16px; } .brand-lockup { width: clamp(108px, 30vw, 132px); } .nav-links { display: none; } .site-nav .demo-button { min-height: 38px; padding: 9px 15px; font-size: 0.76rem; } .hero { min-height: max(700px, 100svh); } .hero-content { padding-top: 150px; } .hero h1 { font-size: clamp(2.45rem, 9.2vw, 5rem); } .hero-support, .section-heading-split, .method-frame, .company, .footer-main { grid-template-columns: minmax(0, 1fr); } .hero-support { gap: 20px; } .hero-scope { justify-self: start; } .solution-grid { grid-template-columns: minmax(0, 1fr); } .solution-layer { min-height: 0; padding: 30px 0 38px; } .solution-layer + .solution-layer { padding-left: 0; border-top: 1px solid var(--color-line); border-left: 0; } .solution-layer h3 { margin-top: 70px; } .method-section { display: block; min-height: 0; } .method-image { position: relative; z-index: 0; inset: auto; width: 100%; height: clamp(360px, 92vw, 600px); } .method-image::after { background: linear-gradient(180deg, transparent 45%, var(--method-bg) 100%); } .method-content { grid-column: auto; gap: 56px; position: relative; margin-top: -40px; padding-block: 0 var(--section-space); } .use-case-grid { flex-direction: column; height: auto; } .use-case, .use-case.is-active { flex: none; min-height: clamp(420px, 105vw, 520px); background: var(--color-charcoal); } .use-case img, .use-case-shade { opacity: 1; transform: none; } .use-case .use-case-label { color: rgba(242, 247, 245, 0.86); } .use-case h3 { color: var(--color-fog); } .use-case span { color: rgba(242, 247, 245, 0.74); } .js .use-case { min-height: 112px; transition: min-height 500ms var(--panel-ease); } .js .use-case.is-active { min-height: clamp(420px, 105vw, 520px); } .js .use-case-copy { gap: 24px; } .js .use-case-body { max-height: 600px; opacity: 1; transform: none; overflow: hidden; transition: max-height 500ms var(--panel-ease), opacity 300ms ease, transform 500ms var(--panel-ease); } .js .use-case:not(.is-active) .use-case-body { max-height: 0; opacity: 0; transform: translateY(12px); } .js .use-case:not(.is-active) img { opacity: 0.2; transform: scale(1.04); } .labs-section { min-height: 820px; } .labs-content { min-height: calc(820px - 2 * var(--section-space)); } .publication-row { grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1.3fr); } .publication-row span { grid-column: 2; text-align: left; } .company { min-height: 0; } .company-image { grid-row: 1; min-height: clamp(360px, 92vw, 600px); } .company-copy { padding: var(--section-space) var(--gutter); } .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-bottom { grid-template-columns: minmax(0, 1fr) auto; } .footer-bottom p:nth-child(2) { grid-row: 2; grid-column: 1 / -1; } } @media (max-width: 560px) { :root { --section-space: 96px; } .site-nav { gap: 12px; } .hero h1 { font-size: clamp(1.9rem, 9.4vw, 3.3rem); line-height: 0.98; } .hero-context { margin-bottom: 18px; } .hero-support { margin-top: 38px; } .section-heading h2, .method-content h2, .labs-heading h2, .company-copy h2 { font-size: clamp(2.55rem, 13vw, 4.2rem); } .method-list li { grid-template-columns: 34px 1fr; gap: 12px; } .use-case h3 { font-size: 1.9rem; } .publication-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 20px; } .publication-row span { grid-column: auto; } .trust-list { grid-template-columns: minmax(0, 1fr); } .trust-list article, .trust-list article:nth-child(even) { padding: 24px 0; border-left: 0; } .trust-list article:not(:last-child) { border-bottom: 1px solid var(--color-line); } .footer-nav { gap: 32px 20px; } } @media (max-width: 360px) { .brand-lockup { width: 100px; } .site-nav .demo-button { padding-inline: 12px; font-size: 0.7rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .hero-video { display: none; } .js [data-reveal], .js [data-reveal].is-visible, .js .hero-context, .js .hero h1, .js .hero-support { opacity: 1; transform: none; animation: none; } }