:root {
  --bg: #0a0a0c;
  --bg-2: #111114;
  --bg-3: #1b1b21;
  --bg-light: #f1ede4;
  --bg-light-2: #e6e1d4;
  --fg: #f2efe8;
  --fg-dim: #8e8b85;
  --ink: #3a3a3a;
  --ink-dim: #6e6e6e;
  --line: rgba(242, 239, 232, 0.10);
  --line-strong: rgba(242, 239, 232, 0.22);
  --line-ink: rgba(50, 50, 50, 0.14);
  --kaia-red: #b81f2a;
  --kaia-gold: #c2a36b;
  --kaia-blue: #2ea2dc;
  --kaia-green: #2f8c4f;
  --kaia-ink: #555555;
  --accent: var(--kaia-red);
  --accent-hex: #b81f2a;
  --accent-2: #c2a36b;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Space Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  /* Minimum readable size for mono eyebrow/label text (WCAG body-text-size). */
  --fs-label: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-feature-settings: "ss01", "ss02", "cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body { min-height: 100vh; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* Keyboard focus — visible against every background */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.btn:focus-visible,
.nav-cta:focus-visible,
.faq-trigger:focus-visible,
.row:focus-visible,
.card:focus-visible {
  outline-offset: 4px;
}

/* Skip link — invisible until focused */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: top .2s ease;
}
.skip-link:focus { top: 16px; }

#hero-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
#hero-canvas.ready { opacity: 1; }

#root { position: relative; z-index: 1; }

.grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: overlay; opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
}

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}
/* The mix-blend-difference that keeps the nav readable over any background is
   scoped to the plain text links only (below), so the brand logo and the
   Kontakt pill keep their true colours.

   The brand is two stacked wordmarks that crossfade: a "dark" variant with a
   white "kaia" for dark backgrounds, and the "light" variant with the true
   gray "kaia" for light sections. ".swiss" stays brand red in both — we can't
   recolour just one word with a CSS filter, hence the two assets. */
.nav .brand { display: flex; align-items: center; }
.nav .brand-lockup { position: relative; display: block; height: 40px; }
.nav .brand-logo {
  height: 40px; width: auto; display: block;
  transition: opacity .3s ease;
}
/* Light (gray "kaia") variant sits on top, hidden until over a light section. */
.nav .brand-logo--light { position: absolute; top: 0; left: 0; opacity: 0; }
.nav .brand[data-on-light] .brand-logo--light { opacity: 1; }
.nav .brand[data-on-light] .brand-logo--dark  { opacity: 0; }
.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a {
  opacity: 0.85;
  transition: opacity .2s;
  /* Difference blend keeps the plain links legible over both the dark hero and
     the light sections. Scoped here (not on .nav) so brand + CTA stay true. */
  mix-blend-mode: difference;
  /* Tap-friendly hit area without changing visual layout. */
  padding: 6px 2px;
  margin: -6px -2px;
}
.nav-links a:hover { opacity: 1; }
.nav-links a.nav-cta {
  /* Solid red pill, isolated from the nav's mix-blend-difference so the
     accent stays true. Generous padding so the text breathes. */
  isolation: isolate;
  mix-blend-mode: normal;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 9px 26px;
  border-radius: 999px;
  margin: -7px 0 -7px 8px;
  opacity: 1;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.nav-links a.nav-cta:hover {
  background: transparent;
  color: var(--accent);
  transform: translateY(-1px);
}

.hero {
  position: relative;
  min-height: 100vh;
  padding: 120px 32px 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: transparent;
}

.hero-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-dim);
}
.hero-meta .dot { color: var(--accent); }

.hero-headline {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(54px, 11vw, 188px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin-top: auto;
  max-width: 1400px;
}
.hero-headline em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.hero-headline .accent {
  color: var(--accent);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

.hero-foot {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
}
.hero-sub {
  font-size: 18px;
  max-width: 460px;
  line-height: 1.45;
  color: var(--fg-dim);
}
.hero-sub strong { color: var(--fg); font-weight: 500; }

.scroll-cue {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: flex; align-items: center; gap: 10px;
}
.scroll-cue::after {
  content: ""; width: 1px; height: 36px; background: linear-gradient(var(--fg), transparent);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0% { transform: scaleY(0.2); transform-origin: top; opacity: 0.2; } 50% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0.2); transform-origin: bottom; opacity: 0.2; } }

.strip {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 32px;
}
.strip-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
}
.strip-label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: flex; align-items: center; gap: 12px;
}
.strip-label::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.strip-tags {
  display: flex; flex-wrap: wrap; gap: 8px 6px;
  justify-content: center;
}
.strip-tags .tag {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--fg);
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
  white-space: nowrap;
}
.strip-tags .tag:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.strip-tags .tag em { font-family: var(--serif); font-style: italic; font-weight: 400; padding-right: 3px; opacity: 0.7; }
.strip-meta {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .strip-inner { grid-template-columns: 1fr; gap: 18px; }
  .strip-tags { justify-content: flex-start; }
  .strip-meta { display: none; }
}

section { position: relative; z-index: 1; background: var(--bg); }
.section-label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: flex; align-items: center; gap: 12px;
}
.section-label::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent);
}

.divisions {
  padding: 140px 32px 120px;
  border-top: 1px solid var(--line);
  background: var(--bg-light);
  color: var(--ink);
}
.divisions .section-label { color: var(--ink-dim); }
.divisions .section-label::before { background: var(--accent); }
.divisions-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 80px;
}
.divisions-head .section-label { margin-bottom: 24px; }
.divisions-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.035em;
}
.divisions-title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.divisions-intro {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 520px;
}

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-ink); border: 1px solid var(--line-ink); }
.card {
  background: var(--bg-light);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 560px;
  position: relative;
  overflow: hidden;
  transition: background .5s ease;
  --card-tint: var(--kaia-red);
}
.card:hover { background: #ebe6da; }
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--card-tint); transform: scaleY(0); transform-origin: top;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.card:hover::before { transform: scaleY(1); }
.card .index {
  font-family: var(--mono); font-size: var(--fs-label); color: var(--ink-dim);
  display: flex; justify-content: space-between; align-items: center;
}
.card .index .tag {
  border: 1px solid var(--line-ink);
  padding: 4px 10px; border-radius: 999px; letter-spacing: 0.08em; text-transform: uppercase;
}
.card .index .tag .dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--card-tint); margin-right: 6px; vertical-align: 1px; }

.card-visual {
  height: 200px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  margin: 6px -4px 0;
}
.card-visual::after {
  content: ""; position: absolute; inset: auto -10% -20% -10%; height: 60%;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in oklab, var(--card-tint) 18%, transparent), transparent 70%);
  opacity: 0; transition: opacity .5s ease;
  filter: blur(20px);
}
.card:hover .card-visual::after { opacity: 1; }
.card-logo {
  max-width: 78%; max-height: 100%;
  object-fit: contain;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
  position: relative; z-index: 1;
}
.card:hover .card-logo { transform: scale(1.04); }

.card-desc { color: var(--ink-dim); font-size: 15px; line-height: 1.55; flex: 1; padding-top: 8px; border-top: 1px solid var(--line-ink); }

.card-more {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.08em;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink);
}
.card-more .arrow {
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--card-tint); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 12px;
  transition: transform .3s ease;
}
.card:hover .card-more .arrow { transform: translateX(4px) rotate(-45deg); }

.about {
  padding: 140px 32px 140px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
}
.about-side { position: sticky; top: 100px; align-self: start; display: flex; flex-direction: column; gap: 24px; }
.about-num {
  font-family: var(--serif); font-style: italic; font-size: 120px; line-height: 1;
  color: var(--accent);
}
.about-side-meta {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.about-content { display: flex; flex-direction: column; gap: 36px; }
.about-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 820px;
}
.about-title em { font-family: var(--serif); font-style: italic; }
.about-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 56px;
}
.about-grid p { color: var(--fg-dim); font-size: 16px; line-height: 1.6; }
.about-grid p strong { color: var(--fg); font-weight: 500; }

/* ---------- Team — standalone "Hinter kaia." founder section ---------- */
/* Mirrors "Über uns 02" exactly: marker (label → number → sub) in the left
   column, everything else (statement + intro + cards) in the content column —
   so the founder cards line up to the same width as the 02 content.
   Reuses .about-num / .about-side-meta / .about-title for an exact match. */
.team {
  padding: 140px 32px 140px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
}
.team-side { align-self: start; }
.team-marker { display: flex; flex-direction: column; gap: 24px; }
.team-content { display: flex; flex-direction: column; gap: 28px; }
.team-intro {
  font-size: 17px;
  line-height: 1.5;
  color: var(--fg-dim);
  max-width: 560px;
}
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px; }

/* Horizontal card: identity (avatar + name/role/loc) on the left, bio + tags on
   the right, so the full card width is used. */
.member {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 36px;
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 0;
  align-items: stretch;
  transition: border-color .5s ease, background-color .5s ease;
}
.member-aside { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding-right: 40px; }
.member-photo {
  position: relative;
  width: 100px; height: 100px; flex: none;
  border-radius: 999px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line-strong);
  transition: border-color .5s ease, box-shadow .5s ease;
}
/* Photo overlays the initials; if it fails to load it's hidden (see onError)
   and the initials monogram shows through as a graceful fallback. */
.member-photo .member-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.member-initials { font-family: var(--serif); font-style: italic; font-size: 36px; color: var(--fg-dim); transition: color .5s ease; }
.member-id { min-width: 0; }
.member-name {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.05;
  color: var(--fg);
}
.member-role {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-dim);
  margin-top: 12px; line-height: 1.5;
}
.member-loc { font-size: 14px; color: var(--fg-dim); margin-top: 12px; }
.member-main {
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding-left: 40px;
  border-left: 1px solid var(--line);
  transition: border-color .5s ease;
}
.member-bio { color: var(--fg-dim); font-size: 15px; line-height: 1.65; max-width: 64ch; }
/* The card is overflow:hidden, so make sure no long token (long name, URL, or
   German compound) can clip — break it instead. (No hyphenation: it would
   chop the short uppercase labels mid-word.) */
.member-name, .member-role, .member-loc, .member-bio { overflow-wrap: break-word; }
.member-tags {
  display: flex; flex-wrap: wrap; align-items: center;
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-dim);
}
.member-tag:not(:last-child)::after { content: "·"; margin: 0 9px; opacity: 0.55; }

/* Hover mirrors the division cards: a brand-red line wipes up the left edge,
   the surface warms a touch, and the avatar + initials brighten. */
.member::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.member:hover { background-color: var(--bg-3); border-color: var(--line-strong); }
.member:hover::before { transform: scaleY(1); }
.member:hover .member-photo { border-color: color-mix(in oklab, var(--accent) 55%, var(--line-strong)); }
.member:hover .member-initials { color: var(--fg); }

.quote {
  padding: 120px 32px;
  border-top: 1px solid var(--line);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.quote-text {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(34px, 5.4vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 1200px;
}
.quote-text .accent { color: var(--accent); }
.quote-author {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim);
  display: flex; align-items: center; gap: 14px;
}
.quote-author .av {
  width: 36px; height: 36px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.faq { padding: 140px 32px; border-top: 1px solid var(--line); }
.faq-head {
  display: grid; grid-template-columns: 1fr 2fr; gap: 48px; margin-bottom: 60px; align-items: end;
}
.faq-head .section-label { margin-bottom: 18px; }
.faq-intro {
  color: var(--fg-dim);
  font-size: 17px;
  line-height: 1.5;
  max-width: 560px;
}
.faq-title {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(40px, 5.2vw, 80px);
  line-height: 0.96; letter-spacing: -0.035em;
}
.faq-title em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-trigger {
  width: 100%;
  display: block;
  padding: 28px 0;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: none;
  font: inherit;
  color: inherit;
}
.faq-row {
  display: grid; grid-template-columns: 48px 1fr 32px;
  gap: 16px; align-items: center;
}
.faq-num { font-family: var(--mono); font-size: var(--fs-label); color: var(--fg-dim); letter-spacing: 0.08em; }
.faq-q {
  font-family: var(--sans); font-size: clamp(20px, 2.2vw, 28px); font-weight: 400;
  letter-spacing: -0.01em; transition: color .3s ease;
}
.faq-trigger:hover .faq-q { color: var(--accent); }
.faq-toggle {
  width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 999px;
  position: relative; transition: transform .4s ease, background .3s ease;
}
.faq-toggle::before, .faq-toggle::after {
  content: ""; position: absolute; background: var(--fg);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.faq-toggle::before { width: 12px; height: 1px; }
.faq-toggle::after { width: 1px; height: 12px; transition: transform .3s ease; }
.faq-item.open .faq-toggle { background: var(--accent); border-color: var(--accent); }
.faq-item.open .faq-toggle::before, .faq-item.open .faq-toggle::after { background: #000; }
.faq-item.open .faq-toggle::after { transform: translate(-50%, -50%) scaleY(0); }

.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.2,.8,.2,1);
}
.faq-a > div {
  overflow: hidden;
  color: var(--fg-dim); font-size: 16px; line-height: 1.6;
  max-width: 760px;
  padding-left: 64px;
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-item.open .faq-a > div { padding-top: 18px; }

.cta {
  padding: 160px 32px 140px;
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.cta-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.9;
}
.cta-globe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(820px, 86vw);
  height: min(820px, 86vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.4;
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
}
.cta-globe svg { width: 100%; height: 100%; display: block; }
.cta-globe svg .ring { stroke: var(--accent); fill: none; opacity: 0.6; stroke-width: 0.5; }
.cta-globe-spin { transform-origin: 200px 200px; animation: spin 80s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.cta-pulse {
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 30px var(--accent), 0 0 80px var(--accent);
  animation: pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.6); }
}

.cta-inner { display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; position: relative; z-index: 1; }

.cta-status {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  backdrop-filter: blur(8px);
  background: rgba(10, 10, 12, 0.4);
}
.cta-status .live {
  position: relative;
  width: 8px; height: 8px; border-radius: 999px;
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
}
.cta-status .live::after {
  content: ""; position: absolute; inset: -4px; border-radius: 999px;
  border: 1px solid #4ade80; animation: ripple 1.8s ease-out infinite;
}
@keyframes ripple {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}
.cta-status .sep { color: var(--fg-dim); }
.cta-status .clock { color: var(--accent); font-variant-numeric: tabular-nums; }

.btn-mag {
  position: relative;
  will-change: transform;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease, border-color .3s ease;
}
.btn-mag .btn-label { display: inline-flex; align-items: center; gap: 12px; }
.btn-mag::before {
  content: ""; position: absolute; inset: -40px; border-radius: 999px;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--accent) 45%, transparent), transparent 60%);
  opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
  z-index: -1;
  filter: blur(10px);
}
.btn-mag:hover::before { opacity: 1; }
.cta-eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.cta-h {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(48px, 9vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  max-width: 1500px;
}
.cta-h em { font-family: var(--serif); font-style: italic; }
.cta-h .accent { color: var(--accent); font-family: var(--serif); font-style: italic; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.btn {
  border: 1px solid var(--line-strong);
  padding: 18px 28px;
  border-radius: 999px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 12px;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: #000; border-color: var(--accent); }
.btn-primary:hover { background: #fff; border-color: #fff; }
.btn-ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn .dot {
  width: 6px; height: 6px; border-radius: 999px; background: currentColor;
}

.footer {
  padding: 80px 32px 32px;
  border-top: 1px solid var(--line);
  background: var(--bg-light);
  color: var(--ink);
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line-ink);
}
.footer-brand .logo-lockup {
  display: block;
  width: 100%;
  max-width: 220px;
}
.footer-brand .logo-lockup img { width: 100%; height: auto; display: block; }
.footer-col h4 {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 18px; font-weight: 400;
}
.footer-col a, .footer-col p { display: block; color: var(--ink); font-size: 15px; padding: 6px 0; }
@media (max-width: 900px) {
  .footer-col a { padding: 10px 0; }
}
.footer-col a:hover { color: var(--accent); }
.footer-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 10px; padding-top: 24px;
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-dim);
}
.footer-meta a:hover { color: var(--ink); }
.footer-meta-links { display: flex; gap: 22px; }
/* Vertical hit-area padding for all three links — their line-box alone is
   only ~15.5px tall. (On the un-wrapped layout these accidentally inherited
   extra height from a flex-stretch against the taller copyright line; once
   .footer-meta can wrap to its own row, that quirk goes away.) Negative
   margin keeps the visible row position/spacing unchanged. */
.footer-meta-links a { padding: 6px 0; margin: -6px 0; }
/* "AGB" renders as a ~24px-wide target — isolated (no neighboring target
   within 24px), so it's exempt from WCAG 2.5.8's minimum, but still well
   under Apple HIG (44pt) / Material (48dp) touch guidance. Centered
   pseudo-element hit area widens it for touch without moving the visible
   link or its siblings. */
.footer-meta-links a[href="/agb"] { position: relative; }
.footer-meta-links a[href="/agb"]::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

.kursor {
  position: fixed; width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid var(--accent);
  pointer-events: none; z-index: 200;
  transform: translate(-50%, -50%);
  transition: transform .15s ease-out, width .25s ease, height .25s ease, background .25s ease;
  mix-blend-mode: difference;
}
.kursor.hot { width: 56px; height: 56px; background: var(--accent); border-color: var(--accent); }

/* Founder cards: below 1440 the horizontal split runs out of room — the bio
   track gets squeezed until long words clip (the card is overflow:hidden for
   the hover line). Stack the internals instead: avatar + identity in a row on
   top, bio + tags below at full card width, where words always wrap. */
@media (max-width: 1440px) {
  .member { grid-template-columns: 1fr; }
  .member-aside { flex-direction: row; align-items: center; gap: 20px; padding-right: 0; }
  .member-photo { width: 84px; height: 84px; }
  .member-initials { font-size: 30px; }
  .member-main {
    justify-content: flex-start;
    padding-left: 0; padding-top: 24px;
    border-left: 0; border-top: 1px solid var(--line);
  }
}

/* One founder per row once two cards get too narrow for an avatar + name row. */
@media (max-width: 1100px) {
  .team-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .hero { padding: 100px 18px 50px; }
  .hero-foot { grid-template-columns: 1fr; }
  .divisions, .about, .team, .faq, .cta { padding-left: 18px; padding-right: 18px; }
  .cards { grid-template-columns: 1fr; }
  .divisions-head, .about, .faq-head, .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-side { position: static; }
  .about-grid { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; gap: 28px; padding-top: 90px; padding-bottom: 90px; }
  .team-grid { grid-template-columns: 1fr; margin-top: 8px; }
  .member { grid-template-columns: 1fr; padding: 26px 24px; }
  .member-aside { flex-direction: row; align-items: center; gap: 18px; padding-right: 0; }
  .member-main { padding-left: 0; border-left: 0; padding-top: 22px; border-top: 1px solid var(--line); }
  .member-photo { width: 72px; height: 72px; }
  .member-initials { font-size: 28px; }
  .nav { padding: 18px; }
  .nav-links { gap: 16px; }
  .kursor { display: none; }
  .hero-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Phones — drop the in-page anchor links (Angebot/Über uns) so the
   high-intent links (Projekte, Blog, Kontakt) get tap-friendly space.
   The Kontakt pill loses its chrome so it reads as a peer link. */
@media (max-width: 640px) {
  .nav-links a[href*="#divisions"],
  .nav-links a[href*="#about"] { display: none; }
  /* Keep the solid red pill on mobile, slightly tighter. */
  .nav-links a.nav-cta { padding: 10px 28px; margin-left: 4px; }
}

/* Very small phones — tighten everything a touch. */
@media (max-width: 480px) {
  .nav { font-size: var(--fs-label); }
  /* Gap trimmed to offset the 11px -> 12px label bump (WCAG min body text
     size) so the nav-links row still clears the fixed nav's padding at the
     narrowest supported widths (320px). */
  .nav-links { gap: 6px; }
  .nav .brand-lockup { height: 34px; }
  .nav .brand .brand-logo { height: 34px; }
  /* The status pill's full sentence ("Aarburg, CH · time · Verfügbar für
     neue Projekte") is the longest run of --fs-label text on the page —
     the 11px -> 12px bump pushed it past 320px viewports. Tighten spacing
     instead of shrinking the font back down. */
  .cta-status {
    gap: 8px;
    padding: 8px 14px 8px 10px;
    letter-spacing: 0.04em;
  }
}

/* ---------- Subpage header (blog / explore) ---------- */
.page-head {
  position: relative;
  padding: 160px 32px 80px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.page-head-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  max-width: 1600px;
  margin: 0 auto;
}
.page-eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
.page-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.page-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(48px, 8vw, 132px);
  line-height: 0.94;
  letter-spacing: -0.04em;
}
.page-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
.page-title .accent {
  color: var(--accent);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
.page-intro {
  font-size: 17px;
  line-height: 1.5;
  color: var(--fg-dim);
  max-width: 480px;
}
.page-intro strong { color: var(--fg); font-weight: 500; }

/* ---------- Editorial row list ---------- */
.row-list {
  padding: 40px 32px 140px;
  background: var(--bg);
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}
.row-list-meta {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between;
}
.row {
  display: grid;
  grid-template-columns: 48px 1fr auto 36px;
  gap: 32px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  cursor: pointer;
  transition: padding-left .35s cubic-bezier(.2,.8,.2,1);
}
.row::before {
  content: "";
  position: absolute; left: -8px; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.row:hover { padding-left: 18px; }
.row:hover::before { transform: scaleY(1); }
.row-index {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.row-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.row-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  transition: color .3s ease;
}
.row:hover .row-title { color: var(--accent); }
.row-meta {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.row-meta .sep { margin: 0 8px; opacity: 0.5; }
.row-tags {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}
.row-arrow {
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 14px; color: var(--fg);
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.row:hover .row-arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateX(4px) rotate(-45deg);
}
.row-empty, .row-error {
  padding: 60px 0;
  text-align: center;
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.row-error { color: var(--accent); }

@media (max-width: 900px) {
  .page-head { padding: 120px 18px 48px; }
  .page-head-inner { grid-template-columns: 1fr; gap: 24px; }
  .row-list { padding: 24px 18px 80px; }
  .row {
    grid-template-columns: 36px 1fr 44px;
    gap: 16px;
    padding: 24px 0;
    min-height: 72px;
  }
  .row-arrow { width: 44px; height: 44px; }
  .row-tags { display: none; }
}

/* ---------- Long-form article ---------- */
/* Subpage main wrapper — pads below the fixed nav. */
.subpage-main { padding-top: 120px; }

.article {
  max-width: 880px;
  margin: 0 auto;
  padding: 60px 32px 140px;
}
.article-back {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: inline-flex; align-items: center; gap: 10px;
  transition: color .3s ease;
  margin-bottom: 48px;
}
.article-back:hover { color: var(--accent); }
.article-back::before { content: "←"; }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 28px;
}
.article-meta .sep { opacity: 0.5; }
.article-meta .accent { color: var(--accent); }

.article-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-bottom: 32px;
}
.article-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

.article-excerpt {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.35;
  color: var(--fg);
  margin-bottom: 48px;
  max-width: 720px;
}

.article-image {
  /* Bleed beyond the article's 32px gutter, but never past the parent —
     prevents horizontal scroll on viewports between mobile and desktop. */
  margin-left: max(-32px, calc(50% - 50vw + 16px));
  margin-right: max(-32px, calc(50% - 50vw + 16px));
  margin-bottom: 56px;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 16 / 10;
  background: var(--bg-2);
}
.article-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.article-image:empty { display: none; }

.article-content {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg);
}
.article-content p {
  margin-bottom: 24px;
}
.article-content p strong {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin-top: 40px;
  margin-bottom: 16px;
}
.article-content p:first-child strong:first-child { margin-top: 0; }
.article-content em {
  font-family: var(--serif);
  font-style: italic;
}
.article-content code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: rgba(242, 239, 232, 0.08);
  padding: 2px 6px;
  border-radius: 3px;
}
.article-content ul, .article-content ol {
  margin: 0 0 24px 24px;
  color: var(--fg);
}
.article-content li {
  margin-bottom: 8px;
}
.article-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.article-foot {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 24px;
}
.article-foot a {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color .3s ease;
}
.article-foot a:hover { color: var(--accent); }

@media (max-width: 900px) {
  .article { padding: 32px 18px 80px; }
  .article-image {
    margin-left: max(-18px, calc(50% - 50vw + 8px));
    margin-right: max(-18px, calc(50% - 50vw + 8px));
  }
}

/* Subpage body needs the nav to keep its difference-blend against dark bg */
.subpage { background: var(--bg); }

/* ============================================================
   Legal pages — Impressum / Datenpolicy / AGB
   Editorial prose on the .article shell. Each section gets a
   mono accent number, a sans heading, and dim body copy.
   ============================================================ */
.legal-section { margin-top: 56px; }
.legal-section:first-of-type { margin-top: 0; }
.legal-num {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.legal-section h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 18px;
}
.legal-section h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.legal-section p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-dim);
  margin-bottom: 18px;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-address p { margin-bottom: 2px; }
.legal-address .legal-name { color: var(--fg); font-weight: 500; }
.legal-address .legal-spacer { margin-top: 14px; }
.legal-updated {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
@media (max-width: 640px) {
  .legal-section p { font-size: 16px; }
  .legal-section { margin-top: 48px; }
}

/* Row title — protect against very long German titles overflowing the grid cell */
.row-body { min-width: 0; }
.row-title {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.row-meta {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Reduced motion — honor the user's OS-level preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .scroll-cue::after { animation: none; }
  .cta-pulse { animation: none; opacity: 1; }
  .cta-status .live::after { animation: none; }
  .cta-globe-spin { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .kursor { display: none !important; }
  #hero-canvas { display: none !important; }
  .cta-canvas { display: none !important; }
}