:root {
	--background: #0b0b0c;
	--rule: rgba(236, 235, 233, 0.12);
	--text: #ecebe9;
	--text-soft: #a3a19d;
	--font: "Geologica", system-ui, sans-serif;
	--display-weight: 380;
	--display-light-weight: 160;
	--display-tracking: -0.015em;
	--display-settings: "SHRP" 100;
	--text-weight: 300;
	--text-settings: "SHRP" 0;
	--safe-top: env(safe-area-inset-top, 0px);
	--gutter: max(clamp(20px, 5vw, 72px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
	--content-width: 1240px;
	--section-space: clamp(96px, 14vh, 180px);
	--radius: 6px;
	color-scheme: dark;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

section[id] {
	scroll-margin-top: 112px;
}

body {
	position: relative;
	margin: 0;
	background: var(--background);
	color: var(--text-soft);
	font: var(--text-weight) 18px/1.6 var(--font);
	font-variation-settings: var(--text-settings);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* A real element, not body::after: Safari hit-tests a pseudo-element as body and then finds no fixed element for the status bar color. */
.grain {
	position: fixed;
	inset: -256px;
	z-index: 50;
	background: url("/static/zeiger/grain.png");
	opacity: 0.035;
	pointer-events: none;
}

.animate .grain {
	animation: grain 0.8s steps(1) infinite;
}

@keyframes grain {
	0% { transform: translate(0, 0); }
	12.5% { transform: translate(-93px, 41px); }
	25% { transform: translate(57px, -118px); }
	37.5% { transform: translate(-171px, -66px); }
	50% { transform: translate(122px, 87px); }
	62.5% { transform: translate(-38px, 149px); }
	75% { transform: translate(201px, -23px); }
	87.5% { transform: translate(-144px, 108px); }
}

a {
	color: var(--text);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(236, 235, 233, 0.3);
	text-underline-offset: 5px;
	transition: text-decoration-color 0.2s ease;
}

a:hover {
	text-decoration-color: currentColor;
}

.button {
	display: inline-block;
	padding: 10px 20px;
	border-radius: var(--radius);
	background: var(--text);
	color: var(--background);
	font-weight: 420;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.button:hover {
	background: #ffffff;
}

.button:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 3px;
}

h2,
.site-name,
.wordmark,
.person-name,
.person-company-name,
.not-found h1 {
	color: var(--text);
	font-weight: var(--display-weight);
	letter-spacing: var(--display-tracking);
	font-variation-settings: var(--display-settings);
}

h2 {
	margin: 0 0 32px;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.15;
}

p {
	margin: 0 0 1em;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.network-layer {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.network {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	will-change: transform;
}

/* Header */

/* Safari on iOS 26 colors the status bar from the solid background-color of a fixed element at the top edge, never from a gradient. */
.top-edge {
	position: fixed;
	inset: 0 0 auto;
	z-index: 21;
	height: calc(var(--safe-top) + 16px);
	background-color: var(--background);
}

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: calc(22px + var(--safe-top)) var(--gutter) 28px;
	background: linear-gradient(var(--background) calc(var(--safe-top) + 23px), rgba(11, 11, 12, 0));
}

.site-name {
	display: inline-flex;
	align-items: center;
	font-size: 19px;
	text-decoration: none;
}

.site-mark {
	width: 26px;
	height: 26px;
	margin-right: 11px;
}

.site-name-first {
	font-weight: 560;
}

.site-name-second {
	margin-left: 0.27em;
	font-weight: 230;
}

.site-nav {
	display: flex;
	align-items: baseline;
	gap: clamp(16px, 2.4vw, 32px);
	font-size: 15px;
}

.site-nav a {
	color: var(--text-soft);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-nav a:hover,
.site-nav a[aria-current] {
	color: var(--text);
}

.site-language {
	display: flex;
	gap: 10px;
	margin-left: clamp(4px, 1vw, 16px);
	font-size: 13px;
}

/* Hero */

.hero {
	position: relative;
	height: calc(clamp(560px, 86svh, 1000px) + var(--safe-top));
	overflow: hidden;
}

.hero-canvas {
	position: absolute;
	inset: var(--safe-top) 0 0;
	display: block;
	width: 100%;
	height: calc(100% - var(--safe-top));
	touch-action: pan-y;
}

.hero-fallback {
	display: none;
}

.no-webgl .hero-fallback {
	position: absolute;
	top: 50%;
	right: 8vw;
	display: block;
	width: min(40vw, 520px);
	height: auto;
	transform: translateY(-50%);
	opacity: 0.85;
}

.hero-text {
	position: absolute;
	left: var(--gutter);
	right: var(--gutter);
	bottom: clamp(48px, 10vh, 120px);
	max-width: 760px;
}

.wordmark {
	margin: 0;
	font-size: clamp(56px, 9.5vw, 152px);
	line-height: 0.95;
}

.wordmark span {
	display: block;
}

/* The negative margins cancel the left side bearing of D and S, so the ink lines up with the text below */
.wordmark-name {
	margin-left: -0.094em;
}

.wordmark-kind {
	margin-left: -0.063em;
	font-size: 0.62em;
	font-weight: var(--display-light-weight);
	letter-spacing: 0.005em;
}

.hero-line {
	max-width: 48ch;
	margin: 30px 0 0;
	font-size: clamp(18px, 1.5vw, 21px);
	line-height: 1.5;
}

.animate .wordmark-name {
	animation: wordmark-in 1.6s cubic-bezier(0.2, 0.7, 0.1, 1) 0.7s both;
}

.animate .wordmark-kind {
	animation: wordmark-in 1.6s cubic-bezier(0.2, 0.7, 0.1, 1) 1.05s both;
}

.animate .hero-line {
	animation: fade-in 1.4s ease 1.9s both;
}

.animate .home .site-header {
	animation: fade-in 1.2s ease 2.4s both;
}

@keyframes wordmark-in {
	from { clip-path: inset(-10% 100% -10% 0); }
	to { clip-path: inset(-10% -2% -10% 0); }
}

@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Reveal on scroll: opacity only with reduced motion, movement and blur otherwise */

[data-reveal] {
	transition:
		opacity 0.5s ease var(--reveal-delay, 0ms),
		transform 0.6s cubic-bezier(0.2, 0.7, 0.1, 1) var(--reveal-delay, 0ms),
		filter 0.5s ease var(--reveal-delay, 0ms);
}

.reveal-pending [data-reveal]:not(.is-revealed) {
	opacity: 0;
}

.animate.reveal-pending [data-reveal="heading"]:not(.is-revealed) {
	filter: blur(6px);
	transform: translateY(6px);
}

.animate.reveal-pending [data-reveal="text"]:not(.is-revealed) {
	transform: translateY(14px);
}

.animate.reveal-pending [data-reveal="image"]:not(.is-revealed) {
	transform: scale(0.985);
}

[data-reveal="image"] {
	transition-duration: 0.7s, 0.8s, 0.5s;
}

/* Products */

.products {
	position: relative;
	padding: clamp(16px, 3vh, 40px) var(--gutter) 0;
}

.product {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 88px);
	align-items: center;
	max-width: 1440px;
	margin: 0 auto var(--section-space);
}

.product-zeiger {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
}

.product-zeiger .product-media {
	order: 2;
}

.product-media {
	display: block;
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 0 0 1px rgba(236, 235, 233, 0.07);
	line-height: 0;
}

.product-media img {
	display: block;
	width: 100%;
	height: auto;
}

.product-text h3 {
	margin: 0 0 30px;
	line-height: 0;
}

.product-title {
	display: inline-block;
	transition: opacity 0.2s ease;
}

.product-title:hover {
	opacity: 0.85;
}

.product-logo-blick {
	width: auto;
	height: clamp(56px, 6vw, 92px);
}

.product-title-zeiger {
	display: inline-flex;
	align-items: center;
	gap: clamp(14px, 1.4vw, 22px);
}

.product-icon {
	width: clamp(64px, 6.6vw, 104px);
	height: auto;
}

.product-logo-zeiger {
	width: auto;
	height: clamp(34px, 3.4vw, 54px);
}

.product-name {
	margin: 0 0 20px;
	font-size: clamp(20px, 1.7vw, 25px);
	font-weight: 170;
	font-variation-settings: "SHRP" 100;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.product-text p {
	max-width: 42ch;
}

.product-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
	margin: 24px 0 0;
}

/* Company */

.company {
	max-width: var(--content-width);
	margin: 0 auto var(--section-space);
	padding: 0 var(--gutter);
	text-align: center;
}

.company-text {
	max-width: 60ch;
	margin: 0 auto;
}

.company-lead {
	margin-bottom: 1.1em;
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 250;
	letter-spacing: var(--display-tracking);
	font-variation-settings: var(--display-settings);
	line-height: 1.4;
}

/* Founders */

.founders {
	margin-bottom: var(--section-space);
}

.founders h2 {
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--gutter);
	text-align: center;
}

.founders-body {
	margin: 20px auto 0;
	padding: 0 var(--gutter);
	text-align: center;
}

.founders-photo {
	position: relative;
	margin: 0;
	line-height: 0;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
}

.founders-photo img {
	display: block;
	width: 100%;
	height: auto;
}

.founders-hotspot {
	position: absolute;
	top: 22%;
	left: 34%;
	width: 32%;
	height: 50%;
	z-index: 1;
}

.founders-hotspot:focus-visible {
	outline: none;
}

.founders-laugh {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.7s ease 0.15s;
}

.founders-hotspot:hover ~ .founders-laugh,
.founders-hotspot:focus-visible ~ .founders-laugh,
.founders-photo.laughing .founders-laugh {
	opacity: 1;
}

.founders-names {
	position: relative;
	height: 30px;
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
	color: var(--text);
	font-size: 15px;
	font-weight: 400;
}

.founders-names li {
	position: absolute;
	left: var(--position);
	transform: translateX(-50%);
	white-space: nowrap;
}

/* Careers */

.careers {
	max-width: var(--content-width);
	margin: 0 auto clamp(56px, 8vh, 88px);
	padding: 0 var(--gutter);
}

.careers h2 {
	margin-bottom: 16px;
}

/* Contact */

.contact {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 var(--gutter) var(--section-space);
}

.contact-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 28px clamp(20px, 3vw, 48px);
	margin: 0;
}

.contact-save {
	display: inline-block;
	margin-top: 10px;
	color: var(--text-soft);
	font-size: 14px;
}

.contact-details dt {
	font-size: 14px;
}

.contact-details dd {
	margin: 6px 0 0;
	color: var(--text);
}

/* Founder card pages */

.person {
	max-width: 520px;
	margin: 0 auto;
	padding: calc(clamp(110px, 15vh, 150px) + var(--safe-top)) var(--gutter) var(--section-space);
	text-align: center;
}

.person-portrait {
	position: relative;
	width: min(240px, 60vw);
	margin: 0 auto 28px;
	overflow: hidden;
	border-radius: 6px;
	line-height: 0;
}

.person-portrait img {
	display: block;
	width: 100%;
	height: auto;
}

.person-laugh {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease 0.1s;
}

.person-portrait:hover .person-laugh,
.person-portrait:active .person-laugh {
	opacity: 1;
}

.person-name {
	margin: 0;
	font-size: clamp(30px, 4vw, 40px);
	line-height: 1.15;
}

.person-role {
	margin: 8px 0 6px;
	font-size: 20px;
	font-weight: 170;
	font-variation-settings: "SHRP" 100;
	letter-spacing: 0.02em;
}

.person-contact {
	display: grid;
	gap: 14px;
	margin: 0 0 30px;
}

.person-contact dt {
	font-size: 14px;
}

.person-contact dd {
	margin: 2px 0 0;
}

.person-duties {
	margin: 0 0 30px;
	font-size: 16px;
}

.person-company {
	margin-top: clamp(64px, 10vh, 96px);
	padding-top: 32px;
	border-top: 1px solid var(--rule);
}

.person-company-name {
	display: inline-flex;
	align-items: center;
	font-size: 19px;
	text-decoration: none;
}

.person-company-name img {
	width: 24px;
	height: 24px;
	margin-right: 10px;
}

.person-company p {
	max-width: 42ch;
	margin: 14px auto;
	font-size: 16px;
}

.person-company .person-products {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
	max-width: none;
	font-size: 15px;
}

/* Not found */

.not-found {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
	padding: calc(140px + var(--safe-top)) var(--gutter) 80px;
	text-align: center;
}

.not-found h1 {
	margin: 0 0 12px;
	font-size: clamp(32px, 4vw, 48px);
}

/* Footer */

.site-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
	padding: 28px var(--gutter) 40px;
	border-top: 1px solid var(--rule);
	font-size: 14px;
	text-align: center;
}

/* Legal pages */

.legal {
	padding: calc(clamp(120px, 16vh, 168px) + var(--safe-top)) var(--gutter) var(--section-space);
}

.legal-page {
	max-width: 760px;
	margin: 0 auto;
}

.legal-page h1 {
	margin: 0 0 40px;
	color: var(--text);
	font-size: clamp(36px, 4vw, 52px);
	font-weight: var(--display-weight);
	letter-spacing: var(--display-tracking);
	font-variation-settings: var(--display-settings);
	line-height: 1.1;
}

.legal-page h2 {
	margin: 48px 0 16px;
	font-size: clamp(21px, 1.8vw, 25px);
}

.legal-page p,
.legal-page li {
	max-width: 68ch;
}

.legal-page ul {
	padding-left: 1.2em;
}

.legal-page li {
	margin-bottom: 0.6em;
}

.legal-page strong {
	color: var(--text);
	font-weight: 450;
}

.legal-eyebrow {
	font-size: 14px;
}

.legal-label {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
}

.site-footer a {
	color: var(--text-soft);
}

/* Narrow screens */

@media (max-width: 860px) {
	.product,
	.product-zeiger {
		grid-template-columns: minmax(0, 1fr);
	}

	.product-zeiger .product-media {
		order: 0;
	}

	.site-nav > a {
		display: none;
	}

	.founders-names {
		height: auto;
		padding: 0 var(--gutter);
	}

	.founders-names li {
		position: static;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Knob panel (?knobs) */

.knobs {
	position: fixed;
	top: 12px;
	right: 12px;
	z-index: 100;
	width: 310px;
	max-height: calc(100vh - 24px);
	overflow-y: auto;
	padding: 12px;
	background: rgba(10, 10, 12, 0.9);
	color: #ddd;
	font: 12px/1.4 system-ui, sans-serif;
}

.knobs h4 {
	margin: 12px 0 6px;
	font-size: 12px;
}

.knobs label {
	display: grid;
	grid-template-columns: 84px 1fr 44px;
	gap: 8px;
	align-items: center;
	margin-bottom: 3px;
}

.knobs output {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.knobs button {
	margin: 8px 8px 0 0;
}