/* ==========================================================================
   editorial.css — light editorial design language
   The site's only stylesheet: every page (EN and DE) uses it. Replaced the
   original warm dark styles.css, which was deleted once the DE page was ported.
   ========================================================================== */

:root {
  /* Surfaces */
  --ed-bg:        #fbfaf7;
  --ed-bg-tint:   #f3f1ea;
  --ed-bg-hover:  #f5f3ec;
  --ed-rule:      #e4e0d7;

  /* Ink */
  --ed-fg:        #1a1815;
  --ed-fg-muted:  #4a453c;
  --ed-fg-soft:   #6b665c;
  --ed-fg-meta:   #6f6959;

  /* Accent */
  --ed-accent:       #2d4b8e;
  --ed-accent-dark:  #1f3767;
  /* Lifted accent for use on the dark block, where #2d4b8e goes muddy */
  --ed-accent-light: #6e92d8;

  /* Dark block (closing CTA + footer) */
  --ed-dark-bg:     #15161b;
  --ed-dark-fg:     #efede7;
  --ed-dark-soft:   #b4bac7;
  --ed-dark-meta:   #8b93a3;
  --ed-dark-faint:  #5c6472;
  --ed-dark-rule:   #2a2c34;
  --ed-dark-rule-2: #3e4250;

  /* Type */
  --ed-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --ed-sans:  'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --ed-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Rhythm */
  --ed-gutter:  clamp(1.5rem, 5vw, 4.5rem);
  --ed-band:    clamp(3.5rem, 7vw, 5.75rem);
  --ed-max:     1440px;
  --ed-labelcol: 290px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Stop iOS inflating body copy when the phone is rotated to landscape */
  -webkit-text-size-adjust: 100%;
}

/* The nav is sticky at every width, so anchored headings need to clear it */
[id] { scroll-margin-top: 7rem; }

body {
  margin: 0;
  background: var(--ed-bg);
  color: var(--ed-fg);
  font-family: var(--ed-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--ed-accent);
  text-decoration: none;
  /* Replace the default iOS blue flash with the accent, at paper opacity */
  -webkit-tap-highlight-color: rgb(45 75 142 / 0.14);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
a:hover { color: var(--ed-accent-dark); }

:focus-visible {
  outline: 2px solid var(--ed-accent);
  outline-offset: 3px;
}

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

/* ── Shared primitives ───────────────────────────────────── */

.ed-wrap {
  max-width: var(--ed-max);
  margin: 0 auto;
  padding-left: var(--ed-gutter);
  padding-right: var(--ed-gutter);
}

.ed-label {
  font-family: var(--ed-mono);
  font-size: 0.719rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ed-fg-meta);
}

.ed-band {
  border-top: 1px solid var(--ed-rule);
  padding-top: var(--ed-band);
  padding-bottom: var(--ed-band);
}

/* Label column on the left, content on the right */
.ed-split {
  display: grid;
  grid-template-columns: var(--ed-labelcol) 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.ed-split > .ed-label { padding-top: 0.625rem; }

/* ── Navigation ──────────────────────────────────────────── */

.ed-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  /* Three children: wordmark, links, CTA. The links' auto margin pushes both
     of the trailing two to the right, so the CTA can break onto the wordmark's
     row on mobile without disturbing the desktop bar. */
  gap: 2.125rem;
  padding: 1.625rem var(--ed-gutter);
  border-bottom: 1px solid var(--ed-rule);
  background: rgb(251 250 247 / 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ed-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4375rem;
  color: var(--ed-fg);
}
.ed-wordmark:hover { color: var(--ed-fg); }

/* Brand mark: three ascending bars. The two trailing bars inherit the
   wordmark's ink via currentColor, so one markup works on paper and on the
   dark block; only the lead bar's accent needs a per-context override. */
.ed-mark {
  flex: none;
  align-self: center;
  width: 1.125rem;
  height: 1.125rem;
}
.ed-mark rect { fill: currentColor; }
.ed-mark rect:nth-of-type(1) { opacity: 0.35; }
.ed-mark rect:nth-of-type(2) { opacity: 0.65; }
.ed-mark .ed-mark-lead { fill: var(--ed-accent); opacity: 1; }
.ed-wordmark .w-serif {
  font-family: var(--ed-serif);
  font-size: 1.3125rem;
  font-style: italic;
  font-weight: 400;
}
.ed-wordmark .w-sans {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--ed-fg-meta);
}

.ed-nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 2.125rem;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  font-size: 0.844rem;
}
.ed-nav-links li { display: flex; }
.ed-nav-links a { white-space: nowrap; }
.ed-nav-links a { color: var(--ed-fg-muted); }
.ed-nav-links a:hover { color: var(--ed-fg); }
/* .ed-lang carries its own colour — outrank the generic link rule. The CTA
   sits outside the list, so it needs no such override. */
.ed-nav-links a.ed-lang { color: var(--ed-fg-meta); }
.ed-nav-links a.ed-lang:hover { color: var(--ed-fg); }
.ed-nav-links a[aria-current='page'] {
  color: var(--ed-fg);
  border-bottom: 1px solid var(--ed-accent);
  padding-bottom: 2px;
}

.ed-nav-sep {
  width: 1px;
  height: 14px;
  background: var(--ed-rule);
}

.ed-lang {
  font-family: var(--ed-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ed-fg-meta);
}

.ed-cta {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ed-bg);
  background: var(--ed-accent);
  padding: 0.5625rem 1.125rem;
}
.ed-cta:hover {
  color: var(--ed-bg);
  background: var(--ed-accent-dark);
}

/* ── Page head ───────────────────────────────────────────── */

.ed-pagehead {
  padding-top: clamp(4rem, 8vw, 6.875rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.ed-pagehead .ed-label { display: block; margin-bottom: 2.5rem; }

.ed-pagehead h1 {
  font-family: var(--ed-serif);
  font-size: clamp(2.5rem, 5.6vw, 4.875rem);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 18ch;
}
.ed-pagehead h1 em {
  font-style: italic;
  color: var(--ed-accent);
}

/* ── Intro copy ──────────────────────────────────────────── */

.ed-prose { max-width: 64ch; }

.ed-lede {
  font-family: var(--ed-serif);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 300;
  line-height: 1.6;
}

.ed-prose p + p {
  margin-top: 1.375rem;
  font-size: 0.938rem;
  line-height: 1.9;
  color: var(--ed-fg-muted);
}
.ed-prose .ed-lede + p { margin-top: 1.875rem; }

.ed-credentials {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ed-rule);
}
.ed-credentials .ed-label {
  display: block;
  font-size: 0.688rem;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
}
.ed-credentials-list {
  font-size: 0.906rem;
  line-height: 2;
  color: var(--ed-fg-muted);
}

/* ── Career arc ──────────────────────────────────────────── */

/* An <ol>: clear the UA list indent, which otherwise pushes every row 40px
   right — a rounding error on desktop, but 11% of a 375px screen. */
.ed-career {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ed-rule);
}

.ed-career-row {
  display: grid;
  grid-template-columns: 48px 1fr 1fr 1.5fr;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: start;
  padding: 1.625rem 0;
  border-bottom: 1px solid var(--ed-rule);
}

.ed-career-idx {
  font-family: var(--ed-mono);
  font-size: 0.719rem;
  color: var(--ed-fg-meta);
}
.ed-career-role {
  font-family: var(--ed-serif);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.4;
}
.ed-career-org {
  font-size: 0.844rem;
  line-height: 1.6;
  color: var(--ed-fg-soft);
}
.ed-career-note {
  font-size: 0.844rem;
  line-height: 1.7;
  color: var(--ed-fg-muted);
}

/* ── Why me ──────────────────────────────────────────────── */

.ed-section-tint {
  background: var(--ed-bg-tint);
  border-top: 1px solid var(--ed-rule);
}
.ed-section-tint .ed-band {
  border-top: 0;
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.ed-why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
}
.ed-why-title {
  font-family: var(--ed-serif);
  font-size: 1.3125rem;
  font-weight: 400;
  line-height: 1.35;
}
.ed-why-body {
  margin-top: 0.875rem;
  font-size: 0.906rem;
  line-height: 1.8;
  color: var(--ed-fg-muted);
}

/* ── Stack ───────────────────────────────────────────────── */

.ed-stack {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.ed-stack-group .ed-label {
  display: block;
  font-size: 0.688rem;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}
.ed-stack-items {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--ed-fg-muted);
}

/* ── Home: hero ──────────────────────────────────────────── */

.ed-hero {
  padding-top: clamp(4.5rem, 11vw, 9.125rem);
  padding-bottom: clamp(4.5rem, 8vw, 7rem);
}

.ed-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-family: var(--ed-mono);
  font-size: 0.719rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ed-accent);
  margin-bottom: 2.875rem;
}
.ed-eyebrow::before {
  content: '';
  flex: 0 0 34px;
  height: 1px;
  background: var(--ed-accent);
}

.ed-hero h1 {
  font-family: var(--ed-serif);
  font-size: clamp(3rem, 7.6vw, 6.75rem);
  font-weight: 200;
  line-height: 1.01;
  letter-spacing: -0.032em;
  max-width: 17ch;
  text-wrap: pretty;
}
.ed-hero h1 em {
  font-style: italic;
  color: var(--ed-accent);
}

.ed-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3.5rem;
  align-items: flex-end;
  margin-top: clamp(3rem, 6vw, 5rem);
}

.ed-hero-lede {
  font-family: var(--ed-serif);
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--ed-fg-muted);
  max-width: 52ch;
}

.ed-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.125rem;
  flex-shrink: 0;
}

.ed-btn-dark {
  font-size: 0.844rem;
  font-weight: 500;
  color: var(--ed-bg);
  background: var(--ed-fg);
  padding: 1rem 2rem;
  white-space: nowrap;
}
.ed-btn-dark:hover {
  color: var(--ed-bg);
  background: var(--ed-accent);
}

.ed-hero-jump {
  font-size: 0.813rem;
  color: var(--ed-fg-soft);
}
.ed-hero-jump:hover { color: var(--ed-fg); }

/* ── Home: the three stages ──────────────────────────────── */

.ed-stage-head { margin-bottom: 4rem; }

.ed-stage-h2 {
  font-family: var(--ed-serif);
  font-size: clamp(1.875rem, 3.2vw, 2.75rem);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.018em;
  max-width: 24ch;
}

.ed-stage-list { border-top: 1px solid var(--ed-rule); }

.ed-stage-row {
  display: grid;
  grid-template-columns: 56px 280px 1fr;
  gap: 2.5rem;
  align-items: baseline;
  padding: 2.625rem 1rem 2.625rem 0;
  border-bottom: 1px solid var(--ed-rule);
}

/* The whole row is the link through to the service detail. Only linked rows
   reserve the trailing "Details →" column — the DE page has no detail pages. */
a.ed-stage-row {
  grid-template-columns: 56px 280px 1fr 130px;
  color: var(--ed-fg);
}
a.ed-stage-row:hover {
  color: var(--ed-fg);
  background: var(--ed-bg-hover);
}
/* Touch has no :hover — give the row the same press feedback on tap */
a.ed-stage-row:active {
  color: var(--ed-fg);
  background: var(--ed-bg-hover);
}
.ed-stage-more {
  justify-self: end;
  font-size: 0.813rem;
  color: var(--ed-accent);
}

.ed-stage-idx {
  font-family: var(--ed-mono);
  font-size: 0.75rem;
  color: var(--ed-accent);
}
.ed-stage-title {
  font-family: var(--ed-serif);
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  font-weight: 300;
  line-height: 1.15;
}
.ed-stage-tag {
  margin-top: 0.75rem;
  font-family: var(--ed-mono);
  font-size: 0.688rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ed-fg-meta);
}
.ed-stage-body {
  font-size: 0.938rem;
  line-height: 1.8;
  color: var(--ed-fg-muted);
  max-width: 54ch;
}

/* ── Home: proof figures ─────────────────────────────────── */

.ed-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}
.ed-proof-num {
  font-family: var(--ed-serif);
  font-size: clamp(2.5rem, 4.4vw, 3.5rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ed-accent);
}
.ed-proof-body {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--ed-fg-muted);
  max-width: 30ch;
}

/* ── Home: about teaser ──────────────────────────────────── */

.ed-teaser-lede {
  font-family: var(--ed-serif);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 300;
  line-height: 1.48;
  letter-spacing: -0.012em;
}
.ed-teaser-body {
  margin-top: 2.125rem;
  font-size: 0.938rem;
  line-height: 1.85;
  color: var(--ed-fg-muted);
}
.ed-teaser-link {
  display: inline-block;
  margin-top: 2rem;
  font-size: 0.844rem;
}

/* ── Services: stage blocks ──────────────────────────────── */

.ed-svc {
  display: grid;
  grid-template-columns: 56px 320px 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.ed-svc-idx {
  padding-top: 0.875rem;
  font-family: var(--ed-mono);
  font-size: 0.75rem;
  color: var(--ed-accent);
}
.ed-svc-title {
  font-family: var(--ed-serif);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.ed-svc-tag {
  margin-top: 1rem;
  font-family: var(--ed-mono);
  font-size: 0.688rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ed-fg-meta);
}
.ed-svc-detail { max-width: 64ch; }
.ed-svc-lede {
  font-family: var(--ed-serif);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.6;
}
.ed-svc-body {
  margin-top: 1.625rem;
  font-size: 0.938rem;
  line-height: 1.85;
  color: var(--ed-fg-muted);
}

.ed-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.ed-chip {
  font-family: var(--ed-mono);
  font-size: 0.719rem;
  color: var(--ed-fg-muted);
  border: 1px solid var(--ed-rule);
  padding: 0.4375rem 0.8125rem;
}

/* ── Services: how it works ──────────────────────────────── */

.ed-how-h2 {
  margin-bottom: 3rem;
  font-family: var(--ed-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.02em;
  max-width: 24ch;
}
.ed-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.ed-how-label {
  margin-bottom: 0.875rem;
  font-family: var(--ed-mono);
  font-size: 0.688rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ed-accent);
}
.ed-how-body {
  font-size: 0.906rem;
  line-height: 1.8;
  color: var(--ed-fg-muted);
}

/* ── Services: FAQ ───────────────────────────────────────── */

.ed-faq {
  border-top: 1px solid var(--ed-rule);
  max-width: 80ch;
}
.ed-faq-item { border-bottom: 1px solid var(--ed-rule); }
.ed-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
}
.ed-faq-item summary::-webkit-details-marker { display: none; }
.ed-faq-item summary::after {
  content: '+';
  font-family: var(--ed-mono);
  font-size: 0.875rem;
  color: var(--ed-fg-meta);
}
.ed-faq-item[open] summary::after { content: '−'; }
.ed-faq-q {
  font-family: var(--ed-serif);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.4;
}
.ed-faq-a {
  margin: 0 0 1.75rem;
  font-size: 0.906rem;
  line-height: 1.85;
  color: var(--ed-fg-muted);
  max-width: 70ch;
}

/* ── Writing: article list ───────────────────────────────── */

/* Short page: keep the dark footer at the bottom of the viewport */
body.ed-tall {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.ed-tall main { flex: 1; }

/* Also an <ol> — same UA indent reset as .ed-career */
.ed-article-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ed-rule);
}
.ed-article-row {
  display: grid;
  grid-template-columns: 180px 1fr 140px;
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: baseline;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--ed-rule);
}
.ed-article-cat {
  font-family: var(--ed-mono);
  font-size: 0.688rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ed-accent);
}
.ed-article-title {
  font-family: var(--ed-serif);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
.ed-article-excerpt {
  margin-top: 1rem;
  font-size: 0.906rem;
  line-height: 1.8;
  color: var(--ed-fg-muted);
}
.ed-article-status {
  justify-self: end;
  font-family: var(--ed-mono);
  font-size: 0.719rem;
  color: var(--ed-fg-meta);
}

/* ── Closing CTA + footer ────────────────────────────────── */

.ed-outro {
  background: var(--ed-dark-bg);
  color: var(--ed-dark-fg);
}
.ed-outro .ed-wrap {
  padding-top: clamp(4rem, 9vw, 7rem);
}

.ed-outro h2 {
  font-family: var(--ed-serif);
  font-size: clamp(2.125rem, 4.8vw, 4.125rem);
  font-weight: 200;
  line-height: 1.08;
  letter-spacing: -0.028em;
  max-width: 20ch;
}

/* Home's contact block runs a little larger and carries an eyebrow + lede */
.ed-outro-lg h2 {
  font-size: clamp(2.375rem, 5.4vw, 4.75rem);
  line-height: 1.06;
  margin-top: 1.875rem;
}
.ed-outro-label {
  font-family: var(--ed-mono);
  font-size: 0.719rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ed-dark-meta);
}
.ed-outro-lede {
  margin-top: 2.125rem;
  font-family: var(--ed-serif);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--ed-dark-soft);
  max-width: 50ch;
}
.ed-outro-lg .ed-outro-actions { margin-top: 3.375rem; }

/* Writing's closing block is the quietest of the four */
.ed-outro-sm h2 { font-size: clamp(1.875rem, 4vw, 3.375rem); line-height: 1.1; }
.ed-outro-sm .ed-outro-actions { margin-top: 2.5rem; }

.ed-outro-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 2.75rem;
}

.ed-btn {
  font-size: 0.906rem;
  font-weight: 500;
  color: var(--ed-dark-bg);
  background: var(--ed-dark-fg);
  padding: 1.1875rem 2.375rem;
}
.ed-btn:hover {
  color: var(--ed-dark-bg);
  background: #ffffff;
}

.ed-outro-email {
  font-size: 0.844rem;
  color: var(--ed-dark-soft);
  border-bottom: 1px solid var(--ed-dark-rule-2);
  padding-bottom: 2px;
}
.ed-outro-email:hover {
  color: var(--ed-dark-fg);
  border-bottom-color: var(--ed-dark-soft);
}

.ed-outro-meta {
  margin-top: 1.375rem;
  font-family: var(--ed-mono);
  font-size: 0.719rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: var(--ed-dark-meta);
}

.ed-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: clamp(4rem, 8vw, 6.5rem);
  padding: 1.75rem 0;
  border-top: 1px solid var(--ed-dark-rule);
}
.ed-footer .ed-wordmark { color: var(--ed-dark-fg); }
.ed-footer .ed-wordmark .w-serif { font-size: 1.1875rem; }
.ed-footer .ed-mark { width: 1rem; height: 1rem; }
.ed-footer .ed-mark .ed-mark-lead { fill: var(--ed-accent-light); }
.ed-footer .ed-wordmark .w-sans {
  font-size: 0.719rem;
  color: var(--ed-dark-meta);
}

.ed-footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.781rem;
}
.ed-footer-links a { color: var(--ed-dark-meta); }
.ed-footer-links a:hover { color: var(--ed-dark-fg); }
.ed-footer-place {
  font-family: var(--ed-mono);
  font-size: 0.719rem;
  letter-spacing: 0.08em;
  color: var(--ed-dark-faint);
}

/* ── Scroll reveal ───────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1000px) {
  .ed-split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .ed-split > .ed-label { padding-top: 0; }

  .ed-career-row {
    grid-template-columns: 48px 1fr;
    gap: 0.375rem 1.25rem;
  }
  .ed-career-idx { grid-row: span 3; }
  .ed-career-org,
  .ed-career-note { grid-column: 2; }
  .ed-career-note { margin-top: 0.25rem; }

  .ed-stack { grid-template-columns: 1fr 1fr; }

  .ed-hero-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .ed-hero-actions {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .ed-stage-head { margin-bottom: 2.5rem; }
  /* `a.ed-stage-row` outranks a bare `.ed-stage-row` here, so the linked form
     has to be named explicitly — otherwise the four-column desktop template
     survives below 1000px and collapses the body column to 0px. */
  .ed-stage-row,
  a.ed-stage-row {
    grid-template-columns: 40px 1fr;
    gap: 0.75rem 1.5rem;
  }
  .ed-stage-row > .ed-stage-body { grid-column: 2; }
  /* Without :hover, this is the only cue that the row is a link — so keep it,
     moved under the body copy rather than into its own trailing column. */
  .ed-stage-row > .ed-stage-more {
    grid-column: 2;
    justify-self: start;
    margin-top: 0.5rem;
  }

  .ed-proof-grid { grid-template-columns: 1fr 1fr; }

  .ed-svc {
    grid-template-columns: 40px 1fr;
    gap: 1.25rem 1.5rem;
  }
  .ed-svc > .ed-svc-detail { grid-column: 2; }

  .ed-how-grid { grid-template-columns: 1fr 1fr; }
  .ed-how-h2 { margin-bottom: 2.25rem; }

  .ed-article-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .ed-article-status { justify-self: start; }
}

@media (max-width: 800px) {
  /* Compact two-row bar: wordmark + CTA on row 1, links on row 2. Lifting the
     CTA out of the list is what makes two rows enough — as a list item it
     wrapped onto a third, and the bar cost ~176px of a phone viewport. At
     ~100px it is short enough to stay pinned, which keeps the primary CTA
     within thumb reach for the whole scroll instead of only at the top. */
  .ed-nav {
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
  .ed-nav > .ed-cta { margin-left: auto; }
  .ed-nav-links {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 0 1.25rem;
    font-size: 0.813rem;
  }
  /* Divider costs a rule plus two gaps — width the German labels need */
  .ed-nav-links li[aria-hidden='true'] { display: none; }
}

@media (max-width: 640px) {
  .ed-why,
  .ed-stack { grid-template-columns: 1fr; }

  .ed-career-row {
    grid-template-columns: 36px 1fr;
    gap: 0.375rem 1rem;
  }

  .ed-outro-actions { gap: 1.25rem; }
  .ed-btn { width: 100%; text-align: center; }

  .ed-proof-grid { grid-template-columns: 1fr; }
  .ed-hero-actions { gap: 1.125rem; }
  .ed-btn-dark { width: 100%; text-align: center; }

  .ed-how-grid { grid-template-columns: 1fr; }
  .ed-faq-item summary { gap: 1.25rem; }

  /* ── Rhythm ────────────────────────────────────────────
     The desktop air is generous by design, but at a single column it stops
     separating sections and just becomes scrolling. Tighten the bands and the
     head margins; the ratios between them are unchanged. */
  :root { --ed-band: 3rem; }
  .ed-section-tint .ed-band {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .ed-hero {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }
  .ed-pagehead {
    padding-top: 3rem;
    padding-bottom: 2.5rem;
  }
  .ed-pagehead .ed-label { margin-bottom: 1.5rem; }
  .ed-stage-head { margin-bottom: 2rem; }
  .ed-stage-row { padding-top: 2.125rem; padding-bottom: 2.125rem; }
  .ed-outro .ed-wrap { padding-top: 3.5rem; }
  .ed-footer { margin-top: 3rem; }

  /* The eyebrow wraps to two lines here; hang the rule off the first one
     rather than centring it against the whole block. */
  .ed-eyebrow {
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
  }
  .ed-eyebrow::before {
    flex-basis: 22px;
    margin-top: 0.55em;
  }

  /* ── Body copy ─────────────────────────────────────────
     A 320px column holds ~34 characters, where 13–15px type set at 1.8–1.9
     reads scattered. Bump the sizes and pull the leading in to match the
     shorter measure. */
  .ed-prose p + p,
  .ed-stage-body,
  .ed-svc-body,
  .ed-teaser-body { font-size: 1rem; line-height: 1.7; }

  .ed-why-body,
  .ed-how-body,
  .ed-faq-a { font-size: 0.969rem; line-height: 1.7; }

  .ed-credentials-list { font-size: 0.969rem; }

  .ed-proof-body,
  .ed-stack-items { font-size: 0.938rem; }

  .ed-career-org,
  .ed-career-note,
  .ed-article-excerpt { font-size: 0.906rem; line-height: 1.65; }

  .ed-outro-meta { font-size: 0.75rem; }
}

/* ── Hit areas ─────────────────────────────────────────────
   Keyed to the input device as well as the width: an iPad in portrait is
   768px wide and driven entirely by thumb, so a width-only query would leave
   its links at their 17px desktop height. Everything here adds padding around
   a label — no type size or leading changes, so the bars and rows read exactly
   as tightly as they did before. */

@media (max-width: 800px), (pointer: coarse) {
  .ed-nav .ed-wordmark,
  .ed-footer .ed-wordmark { padding: 0.3125rem 0; }

  .ed-nav-links a {
    display: flex;
    align-items: center;
    min-height: 38px;
  }
  /* An underline hugs the label; the border would strand itself at the
     bottom edge of the new padding */
  .ed-nav-links a[aria-current='page'] {
    border-bottom: 0;
    padding-bottom: 0;
    text-decoration: underline;
    text-decoration-color: var(--ed-accent);
    text-underline-offset: 5px;
  }
  .ed-cta {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .ed-hero-jump,
  .ed-teaser-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .ed-teaser-link { margin-top: 1.25rem; }

  /* Same border-to-underline swap, on the dark block */
  .ed-outro-email {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-bottom: 0;
    border-bottom: 0;
    text-decoration: underline;
    text-decoration-color: var(--ed-dark-rule-2);
    text-underline-offset: 4px;
  }
  .ed-outro-email:hover { text-decoration-color: var(--ed-dark-soft); }

  .ed-footer-links { gap: 0 1.5rem; }
  .ed-footer-links a {
    display: flex;
    align-items: center;
    min-height: 38px;
  }
}

/* ── Narrow phones (≤360px: iPhone SE, older Android) ─────── */

@media (max-width: 380px) {
  /* At full size the German CTA label no longer fits beside the wordmark and
     drops to a third row, undoing the compact bar. A step down in both keeps
     row 1 intact — and the pinned CTA with it. */
  .ed-nav { column-gap: 0.75rem; }
  .ed-nav > .ed-cta {
    font-size: 0.75rem;
    padding-left: 0.8125rem;
    padding-right: 0.8125rem;
  }
  .ed-nav .ed-wordmark .w-serif { font-size: 1.1875rem; }
}