/* Fonts are served from this site (assets/fonts, SIL Open Font License), so pages make no request to Google. */ /* Inter · latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(assets/fonts/inter-latin-ext-749a30.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter · latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(assets/fonts/inter-latin-1ab1ad.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Inter · latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/inter-latin-ext-749a30.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter · latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/inter-latin-1ab1ad.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Inter · latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/inter-latin-ext-749a30.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter · latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/inter-latin-1ab1ad.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Inter · latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/inter-latin-ext-749a30.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter · latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/inter-latin-1ab1ad.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* JetBrains Mono · latin-ext */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin-ext-76306e.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* JetBrains Mono · latin */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin-1cd702.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* JetBrains Mono · latin-ext */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin-ext-76306e.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* JetBrains Mono · latin */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin-1cd702.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Space Grotesk · latin-ext */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/space-grotesk-latin-ext-e911c2.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Space Grotesk · latin */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/space-grotesk-latin-a57c94.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Space Grotesk · latin-ext */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/space-grotesk-latin-ext-e911c2.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Space Grotesk · latin */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/space-grotesk-latin-a57c94.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Opdo — tokens from Marketing — Handbook (brand and design rules) */ :root { --paper: oklch(0.954 0.012 85); /* #F5F2EC family */ --ink: oklch(0.08 0 0); --fg-warm: oklch(0.16 0.01 80); --red: #e03030; /* logo mark; hiring dot + highlighted optics only */ --ease: cubic-bezier(0.2, 0, 0, 1); --display: "Space Grotesk", system-ui, sans-serif; --body: "Inter", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --gutter: 24px; --fg: var(--paper); color-scheme: light; } @media (min-width: 768px) { :root { --gutter: 40px; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ink); color: var(--paper); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; } .frame { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 var(--gutter); } .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; } .span-7 { grid-column: span 7; } .span-5 { grid-column: span 5; } .align-end { align-self: end; } /* surfaces: foreground steps are opacity of the section foreground */ .ink, [data-theme="ink"] { --fg: var(--paper); } .light { --fg: var(--fg-warm); background: var(--paper); color: var(--fg-warm); } .muted, .story p:not(.claim), .section p { color: color-mix(in oklch, var(--fg) 68%, transparent); } /* type */ h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; margin: 0; color: var(--fg); text-wrap: balance; } h1 { font-size: clamp(3.2rem, 8vw, 6rem); } h2 { font-size: clamp(1.9rem, 4.6vw, 3.75rem); } .ph { font-family: var(--mono); font-size: 0.6em; font-weight: 500; letter-spacing: 0.02em; color: var(--red); border: 1px dashed currentColor; border-radius: 8px; padding: 2px 8px; display: inline-block; line-height: 1.4; } h2.huge { font-size: clamp(3rem, 8vw, 6rem); } h3 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; } p { margin: 1.25rem 0 0; max-width: 34rem; } .lede { font-size: 1.2rem; font-weight: 300; } .eyebrow { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.2em; color: color-mix(in oklch, var(--fg) 55%, transparent) !important; margin: 0 0 1.5rem; } /* buttons, links, pills */ .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.25rem; } .btn { display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border-radius: 999px; font: 500 15px/1 var(--body); border: 1px solid transparent; transition: transform 300ms var(--ease), background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease); } .btn-sm { height: 38px; padding: 0 18px; font-size: 14px; } .btn-solid { background: var(--fg); color: var(--ink); } .light .btn-solid, .site-header[data-theme="light"] .btn-solid { color: var(--paper); } .btn-solid:hover { transform: translateY(-2px); } .btn-ghost { border-color: color-mix(in oklch, var(--fg) 30%, transparent); color: var(--fg); } .btn-ghost:hover { border-color: var(--fg); } .inline-link { display: inline-block; margin-top: 1.75rem; font-weight: 500; color: var(--fg); border-bottom: 1px solid color-mix(in oklch, var(--fg) 30%, transparent); padding-bottom: 2px; transition: border-color 300ms var(--ease); } .inline-link:hover { border-color: var(--fg); } .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.75rem; } .pills span { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.15em; padding: 9px 14px; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--fg) 22%, transparent); color: color-mix(in oklch, var(--fg) 80%, transparent); } .terminal { list-style: none; padding: 0; margin: 1.75rem 0 0; border-top: 1px solid color-mix(in oklch, var(--fg) 14%, transparent); } .terminal li { font: 400 12.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; padding: 11px 0; border-bottom: 1px solid color-mix(in oklch, var(--fg) 14%, transparent); color: color-mix(in oklch, var(--fg) 72%, transparent); } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 2s var(--ease) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* header */ .site-header { position: fixed; inset: 0 0 auto; z-index: 20; height: 72px; display: flex; align-items: center; color: var(--fg); transition: background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease); border-bottom: 1px solid transparent; } .site-header[data-theme="light"] { --fg: var(--fg-warm); } .site-header.scrolled { background: color-mix(in oklch, var(--ink) 82%, transparent); backdrop-filter: blur(14px); border-color: color-mix(in oklch, var(--paper) 10%, transparent); } .site-header.scrolled[data-theme="light"] { background: color-mix(in oklch, var(--paper) 86%, transparent); border-color: color-mix(in oklch, var(--fg-warm) 10%, transparent); } .header-row { display: flex; align-items: center; gap: 32px; } .brand { display: inline-flex; align-items: center; gap: 10px; font: 600 22px/1 var(--display); letter-spacing: -0.03em; color: var(--fg); } .brand.dark { color: var(--fg-warm); } .nav { display: flex; gap: 28px; margin-left: 16px; } .nav a { font-size: 15px; color: color-mix(in oklch, var(--fg) 64%, transparent); transition: color 300ms var(--ease); } .nav a:hover, .nav a[aria-current] { color: var(--fg); } .hiring { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.15em; color: color-mix(in oklch, var(--fg) 72%, transparent); } @media (max-width: 1023px) { .hiring { display: none; } .header-row .btn { margin-left: auto; } } @media (max-width: 860px) { .nav { display: none; } } /* ---------------- the story ---------------- */ /* The stage (3D scene) sticks behind the chapters, which scroll normally over it. The story runs on 100vh past its last chapter so the Customers section can rise over the stage. */ .story { position: relative; background: var(--ink); padding-bottom: 100vh; padding-bottom: 100svh; } .stage { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: hidden; z-index: 0; } #scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .chapters { position: relative; z-index: 1; pointer-events: none; } .chapter { position: relative; min-height: 115vh; min-height: 115svh; display: flex; align-items: center; } .chapter:first-child { min-height: 100vh; min-height: 100svh; } .chapter-pin { width: 100%; padding: 96px 0; } .chapter-copy { grid-column: 1 / span 5; pointer-events: auto; } .chapter[data-side="right"] .chapter-copy { grid-column: 8 / span 5; } .hero-copy { grid-column: 1 / span 6; } .hero-copy .lede { font-size: 1.35rem; max-width: 28rem; } .customers { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; min-height: 100vh; min-height: 100svh; } /* the one red line under each step: the extra fact that matters */ .claim { position: relative; margin-top: 1.75rem !important; padding-left: 18px; font: 500 1.05rem/1.45 var(--body); color: var(--red) !important; max-width: 30rem; } .claim::before { content: ""; position: absolute; left: 0; top: 0.3em; bottom: 0.3em; width: 2px; background: var(--red); } /* engineering labels pinned to 3D points: plain text on a hairline, no boxes */ .labels, .cursors { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .tag { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; font: 400 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklch, var(--paper) 80%, transparent); padding: 0 0 6px 10px; } .tag::before { content: ""; position: absolute; left: 0; top: -4px; width: 1px; height: calc(36px + var(--lead, 0px)); background: color-mix(in oklch, var(--paper) 35%, transparent); } .tag::after { content: ""; position: absolute; left: -2px; top: calc(30px + var(--lead, 0px)); width: 5px; height: 5px; border-radius: 50%; background: var(--paper); } .tag.sel { color: var(--paper); font-weight: 500; } .tag.flat::before, .tag.flat::after { display: none; } .tag.flat { padding-left: 0; } /* collaborators: cursors and a multiplayer selection with a live caption */ .cur { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 300ms var(--ease); } .cur svg { display: block; width: 18px; height: 18px; } .cur .who { position: absolute; left: 14px; top: 16px; white-space: nowrap; font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; padding: 5px 8px; border-radius: 999px; background: var(--paper); color: var(--ink); } .cur .who b { font-weight: inherit; } .cur .who i { font-style: normal; display: none; } .cur.agent .who { background: var(--ink); color: var(--paper); border: 1px dashed color-mix(in oklch, var(--paper) 60%, transparent); } .cur.idle .who b { display: none; } .cur.idle .who i { display: inline; } .selbox { position: absolute; left: 0; top: 0; opacity: 0; border: 1px solid var(--paper); } .selbox.agent { border-style: dashed; } .selbox > i { position: absolute; width: 7px; height: 7px; background: var(--ink); border: 1px solid var(--paper); } .selbox > i:nth-of-type(1) { left: -4px; top: -4px; } .selbox > i:nth-of-type(2) { right: -4px; top: -4px; } .selbox > i:nth-of-type(3) { left: -4px; bottom: -4px; } .selbox > i:nth-of-type(4) { right: -4px; bottom: -4px; } .selbox .cap { position: absolute; left: -1px; top: calc(100% + 12px); width: max-content; max-width: 280px; font: 400 13px/1.4 var(--body); color: var(--paper); } .selbox .cap b { display: block; font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklch, var(--paper) 55%, transparent); margin-bottom: 6px; } .selbox .cap span { font: 500 12px/1.4 var(--mono); letter-spacing: 0.04em; } .selbox.done { border-color: var(--paper); background: color-mix(in oklch, var(--paper) 5%, transparent); } @media (max-width: 959px) and (max-aspect-ratio: 5/4), (max-width: 699px) { .chapter { align-items: flex-end; } .chapter:first-child { align-items: flex-end; } .chapter-pin { padding: 0 0 6vh; } .chapter-copy { position: relative; } .chapter-copy::before { content: ""; position: absolute; z-index: -1; inset: -56px -24px -40px; pointer-events: none; background: linear-gradient(to bottom, color-mix(in oklch, var(--ink) 0%, transparent), color-mix(in oklch, var(--ink) 88%, transparent) 56px, color-mix(in oklch, var(--ink) 88%, transparent) calc(100% - 40px), color-mix(in oklch, var(--ink) 0%, transparent)); } .chapter-copy, .chapter[data-side="right"] .chapter-copy, .hero-copy { grid-column: 1 / -1; } .selbox .cap { font-size: 12px; max-width: 220px; } } @media (max-width: 600px) { .labels { display: none; } .chapter-copy p { font-size: 15px; margin-top: 0.9rem; } .hero-copy .lede { font-size: 1.1rem; } .chapter-copy .actions { margin-top: 1.25rem; } .chapter-copy .inline-link { margin-top: 1rem; } .claim { font-size: 15px !important; margin-top: 1.1rem !important; } .cur .who { font-size: 9.5px; } .cur .who b { display: none; } .cur .who i { display: inline; } .selbox .cap { font-size: 11.5px; max-width: 190px; } } /* ---------------- regular sections ---------------- */ .section { padding: 8rem 0; } @media (min-width: 768px) { .section { padding: 10rem 0; } } .section.tight { padding-top: 0; } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 4rem; } .card { display: flex; flex-direction: column; min-height: 300px; padding: 28px; border-radius: 18px; border: 1px solid color-mix(in oklch, var(--fg) 14%, transparent); background: color-mix(in oklch, var(--fg) 3%, transparent); transition: border-color 300ms var(--ease), transform 300ms var(--ease), opacity 600ms var(--ease); } .card:hover { border-color: color-mix(in oklch, var(--fg) 40%, transparent); } .card-foot { margin-top: auto; padding-top: 2rem; font-weight: 500; font-size: 15px; } .investors { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 2rem; font: 600 1.25rem/1.2 var(--display); letter-spacing: -0.02em; color: var(--fg); } .closing { position: relative; overflow: hidden; border-top: 1px solid color-mix(in oklch, var(--paper) 10%, transparent); } .closing .lede { font-size: 1.35rem; } @media (max-width: 860px) { .span-7, .span-5 { grid-column: 1 / -1; } .span-5 { margin-top: 1rem; } .cards { grid-template-columns: 1fr; } .card { min-height: 220px; } } /* footer */ .site-footer { background: var(--paper); color: var(--fg-warm); --fg: var(--fg-warm); padding: 5rem 0 2rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; } .footer-grid nav { display: flex; flex-direction: column; gap: 10px; } .footer-grid nav a { display: inline-flex; align-items: center; gap: 8px; color: color-mix(in oklch, var(--fg) 68%, transparent); transition: color 300ms var(--ease); } .footer-grid nav a:hover { color: var(--fg); } .footer-claim { color: color-mix(in oklch, var(--fg) 68%, transparent); max-width: 22rem; } .footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in oklch, var(--fg) 12%, transparent); font: 400 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.15em; color: color-mix(in oklch, var(--fg) 55%, transparent); } @media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:first-child { grid-column: 1 / -1; } } /* reveals: fade in with a 32px rise; only when JS is running */ .js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .dot { animation: none; } } /* short landscape windows: keep each chapter's copy clear of the header */ @media (max-height: 640px) and (min-aspect-ratio: 5/4) { .chapter-pin { padding: 72px 0 40px; } .chapter-copy h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); } .chapter-copy h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); } .chapter-copy p { font-size: 15px; margin-top: 0.8rem; } .chapter-copy .eyebrow { margin-bottom: 0.9rem; } .chapter-copy .actions { margin-top: 1.2rem; } .claim { margin-top: 1rem !important; font-size: 15px !important; } } /* ====================================================================== Shared header: CTA and the mobile menu ====================================================================== */ .header-row .header-cta { white-space: nowrap; } .menu-btn { display: none; position: relative; flex: none; width: 42px; height: 42px; margin-left: 4px; padding: 0; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--fg) 26%, transparent); background: transparent; color: var(--fg); cursor: pointer; } .menu-btn i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform 300ms var(--ease), top 300ms var(--ease); } .menu-btn i:first-child { top: 16px; } .menu-btn i:last-child { top: 24px; } .menu-open .menu-btn i:first-child { top: 20px; transform: rotate(45deg); } .menu-open .menu-btn i:last-child { top: 20px; transform: rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; padding: 112px var(--gutter) 40px; background: var(--ink); color: var(--paper); opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease); } .mobile-menu.open { opacity: 1; pointer-events: auto; } .mobile-menu nav a { display: block; padding: 6px 0; font: 600 clamp(2.1rem, 9vw, 3rem)/1.15 var(--display); letter-spacing: -0.03em; color: color-mix(in oklch, var(--paper) 62%, transparent); opacity: 0; transform: translateY(14px); transition: opacity 400ms var(--ease), transform 400ms var(--ease), color 300ms var(--ease); transition-delay: calc(var(--i, 0) * 60ms + 60ms); } .mobile-menu nav a[aria-current], .mobile-menu nav a:hover { color: var(--paper); } .mobile-menu.open nav a { opacity: 1; transform: none; } .mobile-menu .menu-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .mobile-menu .menu-foot .hiring { margin: 0; display: inline-flex; } .site-header.menu-open { --fg: var(--paper); background: transparent !important; border-color: transparent !important; backdrop-filter: none; } .site-header.menu-open .btn-solid { color: var(--ink); } @media (max-width: 860px) { .menu-btn { display: block; } .header-row .header-cta { margin-left: auto; } } @media (max-width: 560px) { .header-row .header-cta { display: none; } .menu-btn { margin-left: auto; } } body.menu-locked { overflow: hidden; } /* ====================================================================== Inner pages (AI Engineering, Parts, Insights) ====================================================================== */ .ink-bg { background: var(--ink); } .hair { border-color: color-mix(in oklch, var(--fg) 14%, transparent); } .page-hero { position: relative; padding: 168px 0 88px; overflow: hidden; } @media (min-width: 768px) { .page-hero { padding: 200px 0 112px; } } .page-hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.4rem); max-width: 15ch; } .page-hero .lede { font-size: 1.25rem; max-width: 36rem; } .hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; } .hero-grid .hero-text { grid-column: 1 / span 6; } .hero-grid .hero-art { grid-column: 7 / span 6; } @media (max-width: 960px) { .hero-grid .hero-text, .hero-grid .hero-art { grid-column: 1 / -1; } .hero-grid .hero-art { margin-top: 56px; } } .art { position: relative; } .art canvas { display: block; width: 100%; height: auto; } .art-caption { margin-top: 12px; font: 400 11px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.15em; color: color-mix(in oklch, var(--fg) 50%, transparent); } .text-link { display: inline-block; margin-top: 1.75rem; font-weight: 500; color: var(--fg); border-bottom: 1px solid color-mix(in oklch, var(--fg) 30%, transparent); padding-bottom: 2px; transition: border-color 300ms var(--ease); } .text-link:hover { border-color: var(--fg); } .links-row { display: flex; flex-wrap: wrap; gap: 0 32px; } /* tool strip: a slow drift */ .marquee { margin-top: 72px; overflow: hidden; border-top: 1px solid color-mix(in oklch, var(--fg) 12%, transparent); border-bottom: 1px solid color-mix(in oklch, var(--fg) 12%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee .track { display: flex; width: max-content; animation: drift 110s linear infinite; } .marquee .track span { padding: 18px 28px; font: 400 13px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in oklch, var(--fg) 72%, transparent); white-space: nowrap; } .marquee .track span::after { content: "·"; margin-left: 56px; color: color-mix(in oklch, var(--fg) 35%, transparent); } @keyframes drift { to { transform: translateX(-50%); } } /* layout helpers */ .split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; align-items: start; } .split > .l { grid-column: span 7; } .split > .r { grid-column: span 5; } .split > .l6 { grid-column: span 6; } .split > .r6 { grid-column: span 6; } @media (max-width: 960px) { .split > * { grid-column: 1 / -1 !important; } } .sub-h { margin-top: 112px; } .sub-h h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); max-width: 26ch; } .section p.lead { font-size: 1.15rem; } /* stats */ .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: 18px; border: 1px solid color-mix(in oklch, var(--fg) 14%, transparent); background: color-mix(in oklch, var(--fg) 14%, transparent); } .stats.three { grid-template-columns: 1fr; } .stat { padding: 24px; background: var(--ink); } .light .stat { background: var(--paper); } .stat b { display: block; white-space: nowrap; font: 600 clamp(1.7rem, 2.8vw, 2.5rem)/1 var(--display); letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; } .stat span { display: block; margin-top: 10px; font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in oklch, var(--fg) 62%, transparent); } .stat p { margin-top: 8px !important; font-size: 13.5px; line-height: 1.5; } .stats-label { margin: 0 0 14px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.2em; color: color-mix(in oklch, var(--fg) 55%, transparent) !important; } /* tables: rows on wide screens, stacked on phones */ .data-table { width: 100%; margin-top: 40px; border-collapse: collapse; font-size: 15px; } .data-table th { padding: 12px 20px 12px 0; text-align: left; font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in oklch, var(--fg) 55%, transparent); border-bottom: 1px solid color-mix(in oklch, var(--fg) 22%, transparent); } .data-table td { padding: 16px 20px 16px 0; vertical-align: top; line-height: 1.5; color: color-mix(in oklch, var(--fg) 72%, transparent); border-bottom: 1px solid color-mix(in oklch, var(--fg) 12%, transparent); } .data-table td:first-child { color: var(--fg); font-weight: 500; } .data-table .us { color: var(--fg); } .data-table th.us { color: var(--fg); } @media (max-width: 720px) { .data-table thead { display: none; } .data-table tr { display: block; padding: 16px 0; border-bottom: 1px solid color-mix(in oklch, var(--fg) 14%, transparent); } .data-table td { display: block; padding: 4px 0; border: 0; } .data-table td[data-label]::before { content: attr(data-label); display: block; margin: 6px 0 2px; font: 500 10px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in oklch, var(--fg) 50%, transparent); } } /* tiles */ .tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; } .tile-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .tile-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .tile-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .tile-grid.four { grid-template-columns: 1fr; } } .tile { display: flex; flex-direction: column; padding: 26px; border-radius: 18px; border: 1px solid color-mix(in oklch, var(--fg) 14%, transparent); background: color-mix(in oklch, var(--fg) 3%, transparent); transition: border-color 300ms var(--ease), transform 300ms var(--ease); } .tile:hover { border-color: color-mix(in oklch, var(--fg) 38%, transparent); transform: translateY(-3px); } .tile .kicker { font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.2em; color: color-mix(in oklch, var(--fg) 50%, transparent); margin-bottom: 18px; } .tile h3 { font-size: 1.3rem; } .tile p { margin-top: 0.75rem; font-size: 15px; line-height: 1.55; } .tile .spec { margin-top: auto; padding-top: 20px; font: 400 12px/1.6 var(--mono); color: color-mix(in oklch, var(--fg) 70%, transparent); } /* the AI's working loop (ask, plan, check, hand over) */ .loop { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid color-mix(in oklch, var(--fg) 14%, transparent); } .loop li { display: grid; grid-template-columns: 250px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid color-mix(in oklch, var(--fg) 14%, transparent); } .loop li b { font: 500 12px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.18em; color: var(--fg); } .loop li b::before { content: "▸ "; color: var(--red); } .loop li span { color: color-mix(in oklch, var(--fg) 75%, transparent); } @media (max-width: 600px) { .loop li { grid-template-columns: 1fr; gap: 6px; } } .contrast { margin-top: 72px !important; max-width: 32ch !important; font: 600 clamp(1.5rem, 3vw, 2.4rem)/1.18 var(--display); letter-spacing: -0.025em; color: var(--fg) !important; } .contrast span { color: color-mix(in oklch, var(--fg) 45%, transparent); } /* staggered entrances */ .js .stagger > * { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms); } .js .stagger.in > * { opacity: 1; transform: none; } /* proof: each result inside its target band */ .proof { margin-top: 48px; border-top: 1px solid color-mix(in oklch, var(--fg) 14%, transparent); } .proof-row { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr 1.2fr; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid color-mix(in oklch, var(--fg) 14%, transparent); } .proof-row.head { padding: 12px 0; font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in oklch, var(--fg) 55%, transparent); } .proof-row .m { color: var(--fg); font-weight: 500; } .proof-row .t { font: 400 13px/1.4 var(--mono); color: color-mix(in oklch, var(--fg) 65%, transparent); } .proof-row .res { font: 500 14px/1.4 var(--mono); color: var(--fg); } .bar { position: relative; height: 6px; border-radius: 3px; background: color-mix(in oklch, var(--fg) 10%, transparent); } .bar .band { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: color-mix(in oklch, var(--fg) 28%, transparent); } .bar .mark { position: absolute; top: -6px; width: 2px; height: 18px; margin-left: -1px; background: var(--red); left: 0; transition: left 1400ms var(--ease) 200ms; } .in .bar .mark, .no-js .bar .mark { left: var(--x); } @media (max-width: 760px) { .proof-row { grid-template-columns: 1fr 1fr; } .proof-row.head { display: none; } .proof-row .m { grid-column: 1 / -1; } .proof-row .bar { grid-column: 1 / -1; } } /* FAQ */ .faq { margin-top: 48px; border-top: 1px solid color-mix(in oklch, var(--fg) 14%, transparent); } .faq details { border-bottom: 1px solid color-mix(in oklch, var(--fg) 14%, transparent); } .faq summary { display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary h3 { font-size: 1.2rem; line-height: 1.3; } .faq summary::after { content: "+"; flex: none; font: 400 24px/1 var(--mono); color: color-mix(in oklch, var(--fg) 60%, transparent); transition: transform 300ms var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { margin: 0 0 24px !important; max-width: 46rem; } /* platform spec: a terminal block that prints itself */ .spec-block { margin-top: 48px; padding: 8px 24px; border-radius: 18px; border: 1px solid color-mix(in oklch, var(--fg) 16%, transparent); background: color-mix(in oklch, var(--fg) 3%, transparent); font: 400 13px/1.5 var(--mono); } .spec-block .row { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid color-mix(in oklch, var(--fg) 10%, transparent); text-transform: uppercase; letter-spacing: 0.1em; } .spec-block .row:last-child { border-bottom: 0; } .spec-block .k { color: color-mix(in oklch, var(--fg) 50%, transparent); } .spec-block .v { color: var(--fg); min-height: 1.5em; } .spec-block .v.typing::after { content: "▌"; margin-left: 2px; color: var(--red); animation: blink 900ms steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } @media (max-width: 600px) { .spec-block .row { grid-template-columns: 1fr; gap: 4px; } } /* how a project starts: a line that draws through four steps */ .timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 56px; list-style: none; padding: 28px 0 0; } .timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: color-mix(in oklch, var(--fg) 16%, transparent); } .timeline::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 1600ms var(--ease) 200ms; } .timeline.in::after { transform: scaleX(1); } .timeline li { position: relative; } .timeline li::before { content: ""; position: absolute; top: -32px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1px solid var(--fg); } .light .timeline li::before { background: var(--paper); } .timeline .n { font: 500 11px/1 var(--mono); letter-spacing: 0.2em; color: color-mix(in oklch, var(--fg) 50%, transparent); } .timeline h3 { margin-top: 14px; font-size: 1.25rem; } .timeline p { margin-top: 0.6rem; font-size: 15px; } @media (max-width: 860px) { .timeline { grid-template-columns: 1fr; padding: 0 0 0 28px; } .timeline::before, .timeline::after { left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; } .timeline::after { transform: scaleY(0); transform-origin: top; } .timeline.in::after { transform: scaleY(1); } .timeline li::before { top: 4px; left: -32px; } } /* modal (training data in depth) */ .modal { width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid color-mix(in oklch, var(--paper) 16%, transparent); border-radius: 22px; background: var(--ink); color: var(--paper); --fg: var(--paper); } .modal::backdrop { background: color-mix(in oklch, var(--ink) 70%, transparent); backdrop-filter: blur(6px); } .modal .modal-in { padding: 40px; overflow: auto; max-height: calc(100vh - 50px); } .modal h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); } .modal .close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--paper) 25%, transparent); background: var(--ink); color: var(--paper); font: 400 20px/1 var(--mono); cursor: pointer; } .modal[open] { animation: pop 300ms var(--ease); } @keyframes pop { from { opacity: 0; transform: translateY(12px); } } @media (max-width: 600px) { .modal .modal-in { padding: 28px 22px; } } .modal .loop li { grid-template-columns: 200px 1fr; } @media (max-width: 700px) { .modal .loop li { grid-template-columns: 1fr; gap: 6px; } } /* tabs (Parts: what we route to) */ .tabs { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 48px; border-bottom: 1px solid color-mix(in oklch, var(--fg) 14%, transparent); } .tabs button { position: relative; padding: 14px 0; border: 0; background: none; cursor: pointer; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in oklch, var(--fg) 55%, transparent); transition: color 300ms var(--ease); } .tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease); } .tabs button[aria-selected="true"] { color: var(--fg); } .tabs button[aria-selected="true"]::after { transform: scaleX(1); } .tab-panel[hidden] { display: none; } .tab-panel .tile-grid { margin-top: 28px; } .tab-panel.in-view .tile { animation: rise 500ms var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); } @keyframes rise { from { opacity: 0; transform: translateY(12px); } } /* insights */ .post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 56px; list-style: none; padding: 0; } @media (max-width: 860px) { .post-grid { grid-template-columns: 1fr; } } .post { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 18px; border: 1px solid color-mix(in oklch, var(--fg) 14%, transparent); background: color-mix(in oklch, var(--fg) 2%, transparent); transition: transform 300ms var(--ease), border-color 300ms var(--ease); } .post:hover { transform: translateY(-4px); border-color: color-mix(in oklch, var(--fg) 38%, transparent); } .post .ph-img { aspect-ratio: 16 / 10; overflow: hidden; background: #f3efe7; } .post .ph-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); } .post .ph-img img.contain { object-fit: contain; } .post:hover .ph-img img { transform: scale(1.04); } .post .body { display: flex; flex-direction: column; flex: 1; padding: 28px; } .post .meta { display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.2em; color: color-mix(in oklch, var(--fg) 55%, transparent); } .post h3 { margin-top: 16px; font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.2; } .post p { margin-top: 0.8rem !important; font-size: 15px; } .post .more { margin-top: auto; padding-top: 22px; font-weight: 500; color: var(--fg); } /* section intro: eyebrow, headline, then its text underneath */ .intro { max-width: 54rem; } .intro h2 { max-width: 24ch; } .intro > p:not(.eyebrow) { margin-top: 1.5rem; max-width: 40rem; font-size: 1.15rem; } /* units stay lower case inside upper-case labels (µm would otherwise turn into a capital mu) */ .tag .u { text-transform: none; } .tag.flip { padding: 0 10px 6px 0; } .tag.flip::before { left: auto; right: 0; } .tag.flip::after { left: auto; right: -2px; } /* AI Engineering hero: the 3D lens in its own frame */ .lens3d { position: relative; aspect-ratio: 5 / 4; } .lens3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } @media (max-width: 960px) { .lens3d { aspect-ratio: 16 / 10; } } @media (max-width: 600px) { .lens3d { aspect-ratio: 4 / 3; } } /* carousel: one row of tiles, phases above, progress below */ .carousel { margin-top: 40px; } .car-head { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; } .car-phases { display: flex; flex-wrap: wrap; gap: 4px 28px; } .car-phases button { position: relative; padding: 12px 0; border: 0; background: none; cursor: pointer; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in oklch, var(--fg) 45%, transparent); transition: color 300ms var(--ease); } .car-phases button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease); } .car-phases button:hover { color: color-mix(in oklch, var(--fg) 80%, transparent); } .car-phases button[aria-current="true"] { color: var(--fg); } .car-phases button[aria-current="true"]::after { transform: scaleX(1); } .car-nav { display: flex; align-items: center; gap: 10px; margin-left: auto; } .car-count { margin-right: 8px; font: 400 12px/1 var(--mono); letter-spacing: 0.12em; color: color-mix(in oklch, var(--fg) 55%, transparent); font-variant-numeric: tabular-nums; } .car-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid color-mix(in oklch, var(--fg) 25%, transparent); background: none; color: var(--fg); font: 400 16px/1 var(--mono); cursor: pointer; transition: border-color 300ms var(--ease), opacity 300ms var(--ease); } .car-nav button:hover { border-color: var(--fg); } .carousel.at-start .car-prev, .carousel.at-end .car-next { opacity: 0.3; pointer-events: none; } .car-track { display: flex; gap: 16px; margin-top: 20px; padding: 6px 0 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); transition: -webkit-mask-image 300ms; } .carousel.at-end .car-track { -webkit-mask-image: none; mask-image: none; } .car-track::-webkit-scrollbar { display: none; } .car-track:focus-visible { outline: 1px dashed color-mix(in oklch, var(--fg) 40%, transparent); outline-offset: 6px; } .car-track .tile { flex: 0 0 calc((100% - 3 * 16px) / 3.4); min-width: 250px; scroll-snap-align: start; } @media (max-width: 860px) { .car-track .tile { flex-basis: calc((100% - 16px) / 1.7); } } @media (max-width: 560px) { .car-track .tile { flex-basis: 82%; min-width: 0; } .car-nav { display: none; } } .car-progress { position: relative; height: 1px; margin-top: 28px; background: color-mix(in oklch, var(--fg) 16%, transparent); } .car-progress i { position: absolute; top: -1px; left: 0; height: 3px; width: 30%; background: var(--red); transition: left 250ms var(--ease), width 250ms var(--ease); } /* FAQ answers can hold a comparison table */ .faq details .data-table { margin: 0 0 20px; max-width: 54rem; } .faq details p.faq-after { color: var(--fg) !important; font-weight: 500; } /* section intro with a small animation beside it */ .intro-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; } .intro-split .art { width: 100%; } @media (max-width: 960px) { .intro-split { grid-template-columns: 1fr; } .intro-split .art { max-width: 560px; } } /* tiles that follow an animation's current mode (Optical engineer on call) */ .tile.mode-tile { cursor: pointer; } .tile.is-active { border-color: color-mix(in oklch, var(--fg) 45%, transparent); box-shadow: inset 0 2px 0 var(--red); } /* proof: the handpiece, optics in red, as a still image */ .device { display: flex; justify-content: center; margin: 0; } .device img { height: clamp(340px, 40vw, 540px); width: auto; } /* jobs */ .jobs-hero { padding-bottom: 40px; } @media (min-width: 768px) { .jobs-hero { padding-bottom: 64px; } } .jobs-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.06; background-image: linear-gradient(to right, var(--paper) 1px, transparent 1px), linear-gradient(to bottom, var(--paper) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent); } .eyebrow.now-hiring { display: inline-flex; align-items: center; gap: 10px; color: var(--red) !important; } .page-hero h1.jobs-title { max-width: 16ch; font-size: clamp(2.6rem, 6.6vw, 6rem); line-height: 0.98; } .jobs-title span { color: var(--red); } .jobs-body { padding-top: 48px; } .jobs-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px 24px; align-items: start; } .jobs-rail { grid-column: span 4; position: sticky; top: 120px; display: grid; gap: 40px; } .jobs-copy { grid-column: 6 / span 7; } @media (max-width: 860px) { .jobs-rail, .jobs-copy { grid-column: 1 / -1; } .jobs-copy { order: -1; } .jobs-rail { position: static; grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 480px) { .jobs-rail { grid-template-columns: 1fr; } } .rail-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in oklch, var(--fg) 14%, transparent); } .rail-list li { padding: 11px 0; border-bottom: 1px solid color-mix(in oklch, var(--fg) 14%, transparent); font: 400 13px/1.4 var(--mono); letter-spacing: 0.04em; color: color-mix(in oklch, var(--fg) 82%, transparent); } .rail-list li::before { content: "▸ "; color: var(--red); } .jobs-copy p:not(.eyebrow) { font-size: 1.15rem; line-height: 1.65; max-width: 38rem; } .jobs-copy p + p { margin-top: 1.4rem; } .jobs-copy p.jobs-lead { font: 600 clamp(1.6rem, 3vw, 2.3rem)/1.2 var(--display); letter-spacing: -0.025em; color: var(--fg) !important; max-width: 24ch; margin-bottom: 2rem; } .jobs-cta { margin-top: 56px; padding: 36px; border-radius: 18px; border: 1px solid color-mix(in oklch, var(--red) 45%, transparent); background: radial-gradient(120% 140% at 100% 0%, color-mix(in oklch, var(--red) 16%, transparent), transparent 60%); } .jobs-cta .eyebrow { color: var(--red) !important; margin-bottom: 1rem; } .jobs-copy .jobs-cta p.jobs-cta-text { margin: 0; font: 600 clamp(1.4rem, 2.6vw, 2rem)/1.25 var(--display); letter-spacing: -0.02em; color: var(--fg) !important; max-width: 26ch; } .jobs-cta a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 6px; } .jobs-cta a:hover { opacity: 0.8; } @media (max-width: 600px) { .jobs-cta { padding: 26px 22px; } } .hiring[aria-current] { color: var(--fg); } /* contact */ .contact-hero { padding-bottom: 72px; } .contact-hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.4rem); } .contact-hero .lede { margin-top: 1.5rem; max-width: 40rem; } .contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; align-items: start; } .contact-side { grid-column: span 4; position: sticky; top: 120px; } .contact-main { grid-column: 6 / span 7; } @media (max-width: 860px) { .contact-side, .contact-main { grid-column: 1 / -1; } .contact-side { position: static; } } .contact-mail { display: inline-block; font: 600 clamp(1.6rem, 3vw, 2.2rem)/1.15 var(--display); letter-spacing: -0.025em; color: var(--fg); border-bottom: 2px solid var(--red); padding-bottom: 2px; } .contact-mail:hover { opacity: 0.8; } .section p.contact-note { margin-top: 2rem; font-size: 15px; } .contact-note .text-link { margin-top: 0; } .contact-form { display: grid; gap: 20px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } } .field { display: grid; gap: 8px; } .field > span { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in oklch, var(--fg) 60%, transparent); } .field input, .field select, .field textarea { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid color-mix(in oklch, var(--fg) 18%, transparent); background: color-mix(in oklch, var(--fg) 3%, transparent); color: var(--fg); font: 400 15px/1.4 var(--body); transition: border-color 200ms var(--ease), background-color 200ms var(--ease); -webkit-appearance: none; appearance: none; } .field textarea { resize: vertical; min-height: 150px; } .field select { padding-right: 40px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; } .field select:invalid { color: color-mix(in oklch, var(--fg) 45%, transparent); } .field input::placeholder, .field textarea::placeholder { color: color-mix(in oklch, var(--fg) 40%, transparent); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: color-mix(in oklch, var(--fg) 55%, transparent); background: color-mix(in oklch, var(--fg) 1%, transparent); } .field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--red); } .form-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 4px; } .form-foot .btn { border: 0; cursor: pointer; } .section p.form-msg { margin: 0; font-size: 14px; color: var(--red); } .form-done { padding: 36px; border-radius: 18px; border: 1px solid color-mix(in oklch, var(--fg) 14%, transparent); } .form-done .eyebrow { color: var(--red) !important; } .section p.form-done-text { font: 600 clamp(1.3rem, 2.4vw, 1.7rem)/1.3 var(--display); letter-spacing: -0.02em; color: var(--fg); max-width: 30ch; } /* ---- insight articles (insights/*.html): one readable column, figures may run wider */ .article { padding-top: clamp(140px, 16vw, 180px); } .article-frame { max-width: calc(46rem + 2 * var(--gutter)); } .back-link { display: inline-block; margin-bottom: 2.5rem; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.2em; color: color-mix(in oklch, var(--fg) 55%, transparent); transition: color 300ms var(--ease); } .back-link:hover { color: var(--fg); } .article h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.04; } .section p.article-meta { margin-top: 1.25rem; font: 400 12px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; max-width: none; } .article-hero { max-width: calc(64rem + 2 * var(--gutter)); margin: 3.5rem auto 0; } .article-hero img { width: 100%; height: auto; border-radius: 18px; border: 1px solid color-mix(in oklch, var(--fg) 12%, transparent); } .article-body { margin-top: 3.5rem; font-size: 1.06rem; line-height: 1.75; } .article-body > :first-child { margin-top: 0; } .section .article-body p { max-width: none; margin: 1.25rem 0 0; color: color-mix(in oklch, var(--fg) 78%, transparent); } .article-body h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.12; margin: 3.5rem 0 0; } .article-body h3 { font-size: 1.3rem; margin: 2.5rem 0 0; } .article-body strong { color: var(--fg); font-weight: 600; } .article-body a { color: var(--fg); border-bottom: 1px solid color-mix(in oklch, var(--red) 70%, transparent); transition: border-color 300ms var(--ease); } .article-body a:hover { border-color: var(--red); } .article-body ul, .article-body ol { margin: 1.25rem 0 0; padding-left: 1.3rem; color: color-mix(in oklch, var(--fg) 78%, transparent); } .article-body li { margin-top: 0.5rem; padding-left: 0.25rem; } .article-body li::marker { color: color-mix(in oklch, var(--fg) 45%, transparent); } .article-body blockquote { margin: 2rem 0 0; padding: 0.25rem 0 0.25rem 1.5rem; border-left: 2px solid var(--red); font: 500 clamp(1.15rem, 2vw, 1.35rem)/1.45 var(--display); letter-spacing: -0.01em; color: var(--fg); } .article-body blockquote p { margin: 0; color: inherit; } .article-body img, .article-body svg { display: block; width: 100%; height: auto; margin: 2rem 0 0; border-radius: 14px; border: 1px solid color-mix(in oklch, var(--fg) 12%, transparent); background: #fff; } .article-body figure { margin: 2.5rem 0 0; } .article-body figure > :first-child { margin-top: 0; } .article-body figcaption { margin-top: 0.75rem; font-size: 0.9rem; color: color-mix(in oklch, var(--fg) 60%, transparent); } .article-body .table-wrap { margin: 2rem 0 0; overflow-x: auto; } .article-body table { width: 100%; border-collapse: collapse; font-size: 0.94rem; line-height: 1.5; } .article-body th { padding: 12px 18px 12px 0; text-align: left; vertical-align: bottom; font: 500 11px/1.35 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: color-mix(in oklch, var(--fg) 55%, transparent); border-bottom: 1px solid color-mix(in oklch, var(--fg) 22%, transparent); } .article-body td { padding: 12px 18px 12px 0; vertical-align: top; color: color-mix(in oklch, var(--fg) 75%, transparent); border-bottom: 1px solid color-mix(in oklch, var(--fg) 12%, transparent); } .article-body td:first-child { color: var(--fg); } .article-body .equation { margin: 2rem 0 0; overflow-x: auto; text-align: center; font-size: 1.4rem; color: var(--fg); } .article + .closing h2 { max-width: 22ch; } @media (max-width: 560px) { .article-body { font-size: 1rem; } .article-body th, .article-body td { padding-right: 12px; } .article-hero, .article-body img, .article-body svg { border-radius: 12px; } } /* ---- footnotes: small superscript numbers that jump to a source list under the section */ .fn-ref { margin-left: 2px; font: 500 0.62em/0 var(--mono); letter-spacing: 0; vertical-align: super; } .fn-ref a { color: var(--red); padding: 0 1px; } .fn-ref a:hover { text-decoration: underline; } .footnotes { margin: 4rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid color-mix(in oklch, var(--fg) 12%, transparent); list-style: none; counter-reset: fn; display: flex; flex-wrap: wrap; gap: 8px 28px; font: 400 11px/1.5 var(--mono); letter-spacing: 0.04em; color: color-mix(in oklch, var(--fg) 55%, transparent); } .footnotes li { counter-increment: fn; scroll-margin-top: 120px; } .footnotes li::before { content: counter(fn); margin-right: 8px; color: var(--red); } .footnotes a { border-bottom: 1px solid color-mix(in oklch, var(--fg) 22%, transparent); transition: color 300ms var(--ease), border-color 300ms var(--ease); } .footnotes a:hover { color: var(--fg); border-color: var(--fg); } .footnotes li:target a { color: var(--fg); border-color: var(--red); } /* ---- contact form: spam trap (hidden from people) and the privacy line */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .section p.form-privacy { margin: 18px 0 0; font-size: 13px; color: color-mix(in oklch, var(--fg) 55%, transparent); } .form-privacy a, .form-msg a { color: var(--fg); border-bottom: 1px solid color-mix(in oklch, var(--fg) 30%, transparent); } /* ---- cookie choice: a small bar at the bottom, both answers equally easy */ .consent { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; --fg: var(--paper); background: color-mix(in oklch, var(--ink) 94%, transparent); color: var(--paper); border: 1px solid color-mix(in oklch, var(--paper) 16%, transparent); border-radius: 18px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 50px rgb(0 0 0 / 0.28); opacity: 0; transform: translateY(16px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); } .consent.open { opacity: 1; transform: none; } .consent p { flex: 1 1 260px; margin: 0; max-width: none; font-size: 14px; line-height: 1.5; color: color-mix(in oklch, var(--paper) 78%, transparent); } .consent p a { color: var(--paper); border-bottom: 1px solid color-mix(in oklch, var(--paper) 35%, transparent); white-space: nowrap; } .consent-actions { display: flex; gap: 8px; margin-left: auto; } @media (prefers-reduced-motion: reduce) { .consent { transition: opacity 200ms linear; transform: none; } } .footer-base a, .link-btn { color: inherit; border-bottom: 1px solid color-mix(in oklch, var(--fg) 25%, transparent); transition: color 300ms var(--ease); } .link-btn { padding: 0; background: none; border-top: 0; border-left: 0; border-right: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } .footer-base a:hover, .link-btn:hover { color: var(--fg); } .notfound { min-height: 72vh; } /* buttons that are real