/* Self-hosted so no visitor's browser ever requests a font from Google:
   an embedded Google Fonts URL sends the visitor's IP to Google, which is
   a GDPR transfer we have no basis for and would have to disclose. Both
   families are SIL Open Font License 1.1. Regenerate with
   scratchpad/fetch-fonts.py if the axes or weights change. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-100-900-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-100-900-latin.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin.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;
}

:root {
  color-scheme: dark;
  --night: #16161e;
  --night-deep: #0f0f16;
  --panel: #1a1b26;
  --ink: #c0caf5;
  --muted: #9aa5ce;
  --accent: #7dcfff;
  --on-night-muted: #7d87b5;
  --on-night-soft: #a9b1d6;
  --line: rgba(192, 202, 245, 0.14);
  --line-on-night: rgba(192, 202, 245, 0.18);
  --gutter: clamp(20px, 5vw, 72px);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--night);
}

body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--panel);
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

h1, h2, h3, p, ul, address {
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- topbar (sits on the dark hero) ---------- */

.topbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 3vh, 30px) var(--gutter);
}

.brand {
  color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.languages {
  display: flex;
  gap: 18px;
}

.languages a {
  color: var(--on-night-muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.languages a[aria-current="page"] {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.brand:hover,
.languages a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100svh;
  padding: clamp(72px, 10vh, 110px) var(--gutter) clamp(28px, 5vh, 56px);
  color: #fff;
  background: linear-gradient(168deg, var(--night-deep) 0%, var(--night) 100%);
}

.hero-eyebrow {
  margin-top: auto;
  margin-bottom: clamp(20px, 4vh, 44px);
  color: var(--on-night-muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(0.66rem, 1.4vw, 0.8rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* AI accent: a caret still generating */
.hero-eyebrow::after {
  content: "";
  display: inline-block;
  width: 0.52em;
  height: 1.05em;
  margin-left: 0.45em;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: caret 1.2s step-end infinite;
}

@keyframes caret {
  50% { opacity: 0; }
}

/* The signature: UPSIDE climbing letter by letter */

.wordmark {
  --step: 0.17em;
  display: flex;
  align-items: flex-end;
  gap: 0.045em;
  padding-top: calc(5 * var(--step));
  font-size: clamp(3rem, 13.5vw, 10.5rem);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.01em;
  user-select: none;
}

.wordmark span {
  position: relative;
  display: block;
  padding-bottom: 0.05em;
  border-bottom: 0.045em solid var(--accent);
  transform: translateY(calc(var(--i, 0) * var(--step) * -1));
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(120ms + var(--i, 0) * 70ms);
}

.wordmark span:nth-child(2) { --i: 1; }
.wordmark span:nth-child(3) { --i: 2; }
.wordmark span:nth-child(4) { --i: 3; }
.wordmark span:nth-child(5) { --i: 4; }
.wordmark span:nth-child(6) { --i: 5; }

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.3em);
  }
}

/* Architecture accent: elevation marks on the first and last step
   (the wordmark climbs exactly 5 × 0.17em = 0.85) */
.wordmark span:first-child::before,
.wordmark span:last-child::after {
  position: absolute;
  color: var(--accent);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(0.55rem, 1vw, 0.72rem);
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: 0.08em;
  line-height: 1;
}

.wordmark span:first-child::before {
  content: "±0,00";
  top: calc(100% + 0.7em);
  left: 0.1em;
}

.wordmark span:last-child::after {
  content: "+0,85";
  right: 0.1em;
  bottom: calc(100% + 0.7em);
}

:lang(en) .wordmark span:first-child::before {
  content: "±0.00";
}

:lang(en) .wordmark span:last-child::after {
  content: "+0.85";
}

.hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 6vw, 96px);
  margin-top: auto;
  padding-top: clamp(18px, 3vh, 28px);
  border-top: 1px solid var(--line-on-night);
  animation: fade 0.8s ease 0.75s both;
}

@keyframes fade {
  from { opacity: 0; }
}

.hero-intro {
  max-width: 56ch;
  color: var(--on-night-soft);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.65;
}

.hero-cta {
  flex-shrink: 0;
  color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid #fff;
  padding-bottom: 4px;
}

.hero-cta:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- sections on the night panel ---------- */

.section-label {
  margin-bottom: clamp(28px, 5vh, 48px);
  color: var(--muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.services,
.project {
  padding: clamp(48px, 9vh, 96px) var(--gutter);
}

.project {
  padding-top: 0;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(32px, 6vw, 88px);
  padding: 0;
  list-style: none;
}

.services-grid li {
  padding: clamp(20px, 3.4vh, 30px) 0;
  border-top: 1px solid var(--line);
}

.services-grid h3 {
  margin-bottom: 10px;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-stretch: 118%;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.services-grid p {
  max-width: 46ch;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ---------- featured project ---------- */

.project-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(20px, 3.4vh, 30px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

/* Two cards in a row of their own, each with a rule above and below: stacked,
   that meets as a double line. The second card and everything after it drops
   its own top rule and leans on the one the card above already drew. */
.project-card + .project-card {
  border-top: none;
}

.project-name {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-stretch: 122%;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.project-desc {
  color: var(--muted);
  font-size: 0.92rem;
}

.project-url {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.project-url span {
  display: inline-block;
  transition: transform 160ms ease;
}

.project-card:hover .project-name,
.project-card:hover .project-url {
  color: var(--accent);
}

.project-card:hover .project-url span {
  transform: translate(3px, -3px);
}

/* ---------- contact / footer (dark bookend) ---------- */

.contact {
  padding: clamp(48px, 9vh, 96px) var(--gutter) clamp(24px, 4vh, 40px);
  color: #fff;
  background: var(--night);
}

.contact .section-label {
  color: var(--on-night-muted);
}

.contact-mail {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: break-word;
  color: #fff;
  /* An address, not a headline. At 3.6rem it was set larger than the page's own
     h1 wordmark and ran most of the way across the footer, which made the one
     line of small print under it look like a caption to the email. Half of
     that again: it is the thing to write to, not the thing to read first, and
     the weight and the white already carry it. The phone floor stays above
     1rem — the address has to survive being read on a phone. */
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-stretch: 120%;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.contact-mail:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}

.contact-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 32px;
  margin-top: clamp(40px, 8vh, 80px);
  padding-top: 18px;
  border-top: 1px solid var(--line-on-night);
  color: var(--on-night-muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.contact-meta address {
  font-style: normal;
}

.contact-meta nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.contact-meta a {
  color: inherit;
  text-decoration: none;
}

.contact-meta a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- focus & motion ---------- */

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

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

  .wordmark span,
  .hero-foot,
  .hero-eyebrow::after {
    animation: none;
  }
}

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  .hero-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .project-card {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .project-url {
    margin-top: 6px;
  }

  .contact-meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- document pages (privacy) ---------- */

.doc {
  background: var(--night);
}

.doc .topbar {
  position: static;
}

.doc-main {
  max-width: 820px;
  padding: clamp(24px, 5vh, 56px) var(--gutter) clamp(64px, 10vh, 120px);
}

.doc-main h1 {
  margin-bottom: 12px;
  color: #fff;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-stretch: 122%;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.doc-date {
  margin-bottom: clamp(28px, 5vh, 44px);
  color: var(--on-night-muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.doc-main h2 {
  margin: clamp(28px, 5vh, 44px) 0 10px;
  font-size: 1.15rem;
  font-stretch: 118%;
  font-weight: 700;
  line-height: 1.2;
}

.doc-main p {
  max-width: 64ch;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 0.95rem;
}

.doc-main strong {
  color: var(--ink);
  font-weight: 600;
}

/* Lists inherit the browser's own size and colour, which is a full step away
   from the paragraphs they sit between. Match .doc-main p exactly. */
.doc-main ul {
  max-width: 64ch;
  margin: 0 0 14px;
  padding-left: 1.15em;
}

.doc-main li {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.95rem;
}

.doc-main li::marker {
  color: var(--accent);
}

.doc-main p a,
.doc-main li a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(125, 207, 255, 0.45);
  text-underline-offset: 3px;
}

.doc-main p a:hover,
.doc-main li a:hover {
  text-decoration-color: var(--accent);
}

.doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: clamp(40px, 7vh, 72px);
  padding-top: 18px;
  border-top: 1px solid var(--line-on-night);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.doc-links a {
  color: var(--on-night-muted);
  text-decoration: none;
}

.doc-links a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* ---------- business identity block on document pages ---------- */

.doc-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 28px;
  margin: 30px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}

.doc-facts dt {
  color: var(--on-night-muted);
  font-size: 0.68rem;
  line-height: 2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.doc-facts dd {
  margin: 0;
  color: var(--on-night-soft);
  line-height: 2;
}

.doc-facts a {
  color: var(--accent);
  text-decoration: none;
}

.doc-facts a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 560px) {
  .doc-facts {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .doc-facts dt {
    margin-top: 14px;
  }
}