/* ==========================================================================
   Parksoft EOOD — single-page site
   Ink / newsprint / signal. Anton (display) · Archivo (body) · IBM Plex Mono (utility)
   ========================================================================== */

/* ---------- fonts (self-hosted; no third-party requests) ---------- */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-latin-400-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-latin-ext-400-normal.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-display: swap;
  src: url('../fonts/archivo-latin-wght-normal.woff2') format('woff2-variations');
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext-wght-normal.woff2') format('woff2-variations');
  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-latin-400-normal.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+2074, 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-latin-ext-400-normal.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-latin-500-normal.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+2074, 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-latin-ext-500-normal.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: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-600-normal.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+2074, 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: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-ext-600-normal.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;
}

/* ---------- tokens ---------- */

:root {
  /* palette */
  --ink: #0D131D;          /* page ground — blue-black, never pure black */
  --ink-raised: #10161F;   /* panels, cards, alternating sections */
  --paper: #F2EDE3;        /* warm newsprint */
  --accent: #18CB96;       /* signal — the green from the Parksoft mark */

  /* paper at alpha */
  --paper-80: rgba(242, 237, 227, 0.8);
  --paper-75: rgba(242, 237, 227, 0.75);
  --paper-72: rgba(242, 237, 227, 0.72);
  --paper-68: rgba(242, 237, 227, 0.68);
  --paper-60: rgba(242, 237, 227, 0.6);
  --paper-55: rgba(242, 237, 227, 0.55);
  --paper-45: rgba(242, 237, 227, 0.45);
  --paper-42: rgba(242, 237, 227, 0.42);
  --paper-40: rgba(242, 237, 227, 0.4);
  --paper-30: rgba(242, 237, 227, 0.3);

  /* rules */
  --rule: rgba(242, 237, 227, 0.12);
  --rule-14: rgba(242, 237, 227, 0.14);
  --rule-18: rgba(242, 237, 227, 0.18);

  /* type */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* layout */
  --container: 1320px;
  --gutter: 28px;
}

/* ---------- base ---------- */

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

html { -webkit-text-size-adjust: 100%; }

html,
body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--paper);
}

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* `clip` contains the overflow without creating a scroll container, so the
   sticky case-study media keeps working. `hidden` above is the fallback. */
@supports (overflow: clip) {
  body { overflow-x: clip; }
}

img { max-width: 100%; display: block; }

a { color: var(--paper); }
a:hover { color: var(--accent); }

::selection { background: var(--accent); color: var(--ink); }

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

/* Lenis needs the document to size naturally; without this the wrapper can
   trap the scroll height. Also kills native smooth scroll fighting the rAF. */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 2px;
}
.skip-link:focus-visible {
  top: 12px;
  color: var(--ink);
}

/* the accent full stop that terminates most headlines */
.dot { color: var(--accent); }

/* ---------- shared type ---------- */

.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.section-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--paper-40);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}

.section-title {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 5.6vw, 84px);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--paper);
}

.section-intro {
  margin: 24px 0 0;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--paper-72);
  text-wrap: pretty;
}

/* masked line reveal: the mask clips, the inner line is what GSAP moves */
.line-mask { display: block; overflow: hidden; }
.line { display: block; }

.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--paper-55);
  border: 1px solid var(--rule-18);
  padding: 6px 10px;
}

/* ---------- buttons & links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 18px 30px;
  border-radius: 2px;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn--accent {
  background: var(--accent);
  color: var(--ink);
}
.btn--accent:hover { background: var(--paper); color: var(--ink); }
.btn__arrow { font-size: 15px; }

.btn--lg {
  gap: 14px;
  font-size: 14px;
  padding: 22px 40px;
}
.btn--lg .btn__arrow { font-size: 16px; }

.link-mail {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--paper-72);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--paper-30);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.link-mail:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}
.link-mail--lg {
  font-size: 14px;
  color: var(--paper-75);
}

/* ---------- header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: rgba(13, 19, 29, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: nowrap;
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: var(--paper);
}
.wordmark:hover { color: var(--paper); }
/* The real mark, in newsprint with the brand green kept on the glyph.
   The lockup floats its green glyph well above the wordmark, so roughly a
   third of the box is air — the height has to be generous for the word
   itself to read at the size the header wants. */
.wordmark__logo {
  display: block;
  height: 58px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: nowrap;
}

.nav__link {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--paper-72);
  transition: color 0.2s ease;
}
.nav__link:hover { color: var(--paper); }

.nav__cta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  padding: 9px 16px;
  border-radius: 2px;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.nav__cta:hover { background: var(--accent); color: var(--ink); }

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}

.hero__wash,
.hero__grain,
.hero__scrim,
.hero__canvas {
  position: absolute;
  inset: 0;
}

.hero__wash {
  background:
    radial-gradient(120% 90% at 72% 14%, #182230 0%, #10161F 42%, #0D131D 72%),
    linear-gradient(180deg, transparent 34%, rgba(242, 237, 227, 0.045) 47%, transparent 62%);
}

.hero__grain {
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.hero__canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

.hero__scrim {
  background: linear-gradient(
    180deg,
    rgba(13, 19, 29, 0.55) 0%,
    rgba(13, 19, 29, 0) 26%,
    rgba(13, 19, 29, 0) 52%,
    rgba(13, 19, 29, 0.82) 84%,
    #0D131D 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 150px var(--gutter) 72px;
}

.hero__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--paper-60);
}

.hero__title {
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(54px, 10vw, 160px);
  line-height: 0.93;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  color: var(--paper);
}

.line-mask--sub { margin-top: 18px; }

.hero__title-sub {
  font-size: clamp(22px, 3vw, 48px);
  letter-spacing: 0.02em;
  color: rgba(242, 237, 227, 0.82);
}

.hero__sub {
  margin: 30px 0 0;
  max-width: 600px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--paper-72);
  text-wrap: pretty;
}

.hero__actions {
  margin-top: 38px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.hero__tagline {
  margin: 46px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--paper-42);
}

/* ---------- client strip ---------- */

/* sits below .stats, which already carries the dividing rule above it */
.clients {
  border-bottom: 1px solid var(--rule);
  padding: 30px 0;
  background: var(--ink);
}

.clients__label {
  margin: 0 0 20px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: var(--paper-45);
}

.marquee {
  overflow: hidden;
  width: 100%;
}

/* Duration is a function of track length, not a taste value: one set is now
   ~3730px, so half the track is ~7460px of travel. 165s puts that at roughly
   45px/s — about a logo every seven seconds, which reads as drift rather than
   as motion. The original 34s was tuned for a much shorter strip and worked
   out at 220px/s once the strip doubled in length. Re-derive this if marks are
   added or removed. */
.marquee__track {
  display: flex;
  width: max-content;
  animation: ps-marquee 165s linear infinite;
}

/* four identical sets; the loop shifts by exactly half the track */
.marquee__set {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-right: 64px;
}

.marquee__name {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--paper-60);
  white-space: nowrap;
}

/* Client marks are masked rather than dropped in as pictures: only the alpha
   of each logo is used, and the fill comes from the page's own paper tone.
   Seven brand palettes on one strip would fight each other and the accent;
   this way the strip stays part of the ink/newsprint system, and a logo that
   only exists as red-on-white still reads on the dark ground.
   --logo-ar is the mark's own aspect ratio, so height alone sets the size. */
.marquee__logo {
  flex: none;
  height: var(--logo-h);
  width: calc(var(--logo-h) * var(--logo-ar));
  background-color: var(--paper-60);
  -webkit-mask: var(--logo-src) center / contain no-repeat;
  mask: var(--logo-src) center / contain no-repeat;
  transition: background-color 0.35s ease;

  /* the client's name stays in the DOM as the element's own text: it is what
     screen readers announce, and what shows if masking is unavailable */
  font-size: 0;
  color: transparent;
  white-space: nowrap;
}

.marquee__logo:hover {
  background-color: var(--paper);
}

/* Sizing rule: every single-line wordmark gets the same box height, because
   for a wordmark the box IS the cap height — that is what makes a row of
   unrelated marks read as one line. Stacked lockups (NOZ, Scanfield) carry a
   second line inside the same box, so they need proportionally more of it.
   --logo-ar is each mark's measured ink ratio, not its declared viewBox: half
   these files ship a box that is looser or tighter than the artwork. */
.marquee__logo {
  --logo-h: 32px;
}

.marquee__logo--zeitonline {
  --logo-ar: 9.351;
  --logo-src: url('../img/logos/zeitonline.svg');
}
.marquee__logo--abendblatt {
  --logo-ar: 8.806;
  --logo-src: url('../img/logos/abendblatt.svg');
}
.marquee__logo--morgenpost {
  --logo-ar: 7.8;
  --logo-src: url('../img/logos/morgenpost.svg');
}
.marquee__logo--waz {
  --logo-ar: 2.757;
  --logo-src: url('../img/logos/waz.svg');
}
.marquee__logo--bz {
  --logo-h: 44px;
  --logo-ar: 4.38;
  --logo-src: url('../img/logos/bz.svg');
}
.marquee__logo--ta {
  --logo-ar: 5.364;
  --logo-src: url('../img/logos/ta.svg');
}
.marquee__logo--vrm {
  --logo-ar: 2.739;
  --logo-src: url('../img/logos/vrm.svg');
}
.marquee__logo--megachim {
  --logo-ar: 4.891;
  --logo-src: url('../img/logos/megachim.svg');
}

/* Horizontal lockup with a tall shield, so the box is set by the mark rather
   than by the cap height. The system forbids green on dark; the mask takes the
   alpha only and fills from --paper-60, which is the reverse colourway. */
.marquee__logo--newagro {
  --logo-h: 52px;
  --logo-ar: 3.085;
  --logo-src: url('../img/logos/newagro.png');
}

/* stacked lockups — a second line lives inside the box */
.marquee__logo--noz {
  --logo-h: 52px;
  --logo-ar: 0.889;
  --logo-src: url('../img/logos/noz.svg');
}
.marquee__logo--scanfield {
  --logo-h: 46px;
  --logo-ar: 3.633;
  --logo-src: url('../img/logos/scanfield.png');
}

/* No mask support: the span would be a blank rectangle, so let it fall all the
   way back to the mono wordmark the strip used before the logos. */
@supports not ((-webkit-mask-image: url('#m')) or (mask-image: url('#m'))) {
  .marquee__logo {
    width: auto;
    height: auto;
    background: none;
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--paper-60);
  }
}

.marquee__sep {
  color: var(--accent);
  font-size: 13px;
}

@keyframes ps-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- stats ---------- */

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

.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.stat {
  border-left: 1px solid var(--rule);
  padding: 34px 26px 38px;
}

.stat__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(44px, 4.6vw, 68px);
  line-height: 1;
  color: var(--paper);
}

/* the wordmark stat ("Millions.") sits a notch smaller so it optically
   matches the numerals beside it */
.stat__value--word {
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 1.14;
  text-transform: uppercase;
}

.stat__label {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--paper-55);
}

/* ---------- ai ---------- */

/* No border-top: .stats already closes with a rule, and .clients below opens
   without one, so the band carries only its own bottom edge. Raised ink is what
   separates it from the sections either side. */
.ai {
  padding: 96px 0 104px;
  border-bottom: 1px solid var(--rule);
  background: var(--ink-raised);
}

/* ---------- services ---------- */

.services { padding: 120px 0 110px; }

/* 360px floor puts six cards on a 3×2 grid at full width and 2×3 mid-range,
   where the old 440px floor would only ever give two columns. */
.bento {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 1px;                       /* the gap IS the rule — background shows through */
  background: var(--rule);
  border: 1px solid var(--rule);
}

.card {
  background: var(--ink-raised);
  padding: 36px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 240px;
}

.card__index {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper);
}

/* the benefit line under each title — a standfirst, so it sits brighter and
   larger than the body and gives the card something to be read at a glance */
.card__lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--paper);
  text-wrap: pretty;
  max-width: 46ch;
}

.card__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--paper-68);
  text-wrap: pretty;
  max-width: 52ch;
}

.card .tags { margin-top: auto; }

/* The "no house stack" claim, evidenced. Quiet by design — it reads as a
   spec plate, not a badge wall. */
.stack-strip {
  margin: 26px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 2;
  letter-spacing: 0.14em;
  color: var(--paper-45);
}

/* ---------- selected work ---------- */

.work {
  padding: 40px 0 60px;
  border-top: 1px solid var(--rule);
}

.container--work { padding: 60px var(--gutter) 0; }

/* Card index above the long-form cases. Borrows the .bento treatment — the 1px
   gap IS the rule — so the two grids on the page read as one system. */
.work-index {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.work-index__item { display: flex; }

.work-index__link {
  background: var(--ink-raised);
  padding: 26px 24px 24px;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
}

.work-index__link:hover,
.work-index__link:focus-visible { background: #141B26; }

.work-index__id {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.work-index__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper);
}

.work-index__meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: 0.12em;
  color: var(--paper-55);
}

/* pinned to the card foot so the sector labels line up across the row */
.work-index__sector {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--paper-40);
}

.case {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 48px;
  padding: 64px 0;
  border-bottom: 1px solid var(--rule);
}

.case--first {
  margin-top: 48px;
  border-top: 1px solid var(--rule);
}

.case--last { border-bottom: 0; }

/* alternate the media column so the eye zig-zags down the page */
.case--flip .case__media { order: 2; }
.case--flip .case__body { order: 1; }

.case__sticky {
  position: sticky;
  top: 110px;
}

.case__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.case__index {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.case__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  text-transform: uppercase;
  color: var(--paper);
}

.case__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--paper-68);
  text-wrap: pretty;
  max-width: 58ch;
}

.outcome {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--paper);
}

.outcome__label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--accent);
}

/* ---------- image frames & placeholder slots ---------- */

.frame { margin: 0; }

.frame__box {
  border: 1px solid var(--rule-14);
  background: var(--ink-raised);
  padding: 10px;
}

.frame__inner {
  position: relative;
  width: 100%;
}
.frame__inner--landscape { aspect-ratio: 4 / 3; }
.frame__inner--portrait { aspect-ratio: 4 / 5; }

.frame__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- masthead switcher ---------- */

/* The case's claim is one platform behind many titles, so the control is the
   list of titles: pick a masthead, the phone swaps. Radio inputs do the state,
   which means no JavaScript, native keyboard support (arrow keys walk the
   group) and nothing to initialise. No scrolling, no dots, no arrows — the
   publication names are the only affordance the frame needs, and they are
   content rather than chrome. */
.switch__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.switch__stack {
  position: absolute;
  inset: 0;
}

.switch__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.switch__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  margin: 12px 0 0;
}

.switch__tab {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-40);
  cursor: pointer;
  padding: 3px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.switch__tab:hover { color: var(--paper-72); }

.switch__radio--zeit:checked ~ .frame__box .switch__shot--zeit { opacity: 1; }
.switch__radio--zeit:checked ~ .switch__tabs .switch__tab--zeit {
  color: var(--paper);
  border-bottom-color: var(--accent);
}
.switch__radio--zeit:focus-visible ~ .switch__tabs .switch__tab--zeit {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.switch__radio--waz:checked ~ .frame__box .switch__shot--waz { opacity: 1; }
.switch__radio--waz:checked ~ .switch__tabs .switch__tab--waz {
  color: var(--paper);
  border-bottom-color: var(--accent);
}
.switch__radio--waz:focus-visible ~ .switch__tabs .switch__tab--waz {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.switch__radio--morgenpost:checked ~ .frame__box .switch__shot--morgenpost { opacity: 1; }
.switch__radio--morgenpost:checked ~ .switch__tabs .switch__tab--morgenpost {
  color: var(--paper);
  border-bottom-color: var(--accent);
}
.switch__radio--morgenpost:focus-visible ~ .switch__tabs .switch__tab--morgenpost {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.switch__radio--morgen:checked ~ .frame__box .switch__shot--morgen { opacity: 1; }
.switch__radio--morgen:checked ~ .switch__tabs .switch__tab--morgen {
  color: var(--paper);
  border-bottom-color: var(--accent);
}
.switch__radio--morgen:focus-visible ~ .switch__tabs .switch__tab--morgen {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.switch__radio--vrm:checked ~ .frame__box .switch__shot--vrm { opacity: 1; }
.switch__radio--vrm:checked ~ .switch__tabs .switch__tab--vrm {
  color: var(--paper);
  border-bottom-color: var(--accent);
}
.switch__radio--vrm:focus-visible ~ .switch__tabs .switch__tab--vrm {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}


/* Autoplay. No radio is checked to begin with, so the stack runs a keyframe
   cycle — 4s a masthead, 0.8s to cross over. The moment the reader picks a
   title, :has() kills the animation everywhere and the :checked rules below
   take over for good: it never yanks the frame back out from under them.
   Without :has() support the switcher simply stays on autoplay. */
@keyframes ms-shot {
  0%, 16% { opacity: 1; }
  20%, 96% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes ms-label {
  0%, 16% { color: var(--paper); border-bottom-color: var(--accent); }
  20%, 96% { color: var(--paper-40); border-bottom-color: transparent; }
  100% { color: var(--paper); border-bottom-color: var(--accent); }
}

.switch__shot { animation: ms-shot 20s linear infinite; }
.switch__tab { animation: ms-label 20s linear infinite; }

.switch__shot--zeit, .switch__tab--zeit { animation-delay: 0s; }
.switch__shot--waz, .switch__tab--waz { animation-delay: -16s; }
.switch__shot--morgenpost, .switch__tab--morgenpost { animation-delay: -12s; }
.switch__shot--morgen, .switch__tab--morgen { animation-delay: -8s; }
.switch__shot--vrm, .switch__tab--vrm { animation-delay: -4s; }

/* a choice, once made, sticks */
.frame:has(.switch__radio:checked) .switch__shot,
.frame:has(.switch__radio:checked) .switch__tab { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .switch__shot,
  .switch__tab { animation: none; }
  .frame:not(:has(.switch__radio:checked)) .switch__shot--zeit { opacity: 1; }
  .frame:not(:has(.switch__radio:checked)) .switch__tab--zeit {
    color: var(--paper);
    border-bottom-color: var(--accent);
  }
}

.frame__cap {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--paper-42);
}

.slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  border: 1px dashed var(--rule-18);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 10px,
      rgba(242, 237, 227, 0.022) 10px 20px
    );
}

.slot__cap {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-30);
}

/* ---------- how it works ---------- */

.process {
  padding: 110px 0;
  border-top: 1px solid var(--rule);
  background: var(--ink-raised);
}

.process__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 40px;
}

.pillar {
  border-top: 1px solid var(--rule-18);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pillar__index {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.pillar__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  text-transform: uppercase;
  color: var(--paper);
}

.pillar__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--paper-68);
  text-wrap: pretty;
}

/* the .pillar flex column already supplies the rhythm, so the list only has to
   set its own markers — accent bullets, hung outside the text block */
.pillar__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pillar__list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--paper-68);
  text-wrap: pretty;
}

.pillar__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--accent);
}

/* ---------- about ---------- */

.about {
  padding: 120px 0;
  border-top: 1px solid var(--rule);
}

.about__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 56px;
  align-items: start;
}

.about__media { max-width: 440px; }

.about__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.about__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--paper);
}

.about__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--paper-72);
  text-wrap: pretty;
  max-width: 58ch;
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 24px;
  margin: 8px 0 0;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}

.facts__key {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--paper-42);
}

.facts__val {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--paper-80);
}

/* ---------- contact + footer ---------- */

.contact {
  padding: 140px 0 0;
  border-top: 1px solid var(--rule);
  background: var(--ink-raised);
  position: relative;
  overflow: hidden;
}

.contact__title {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(46px, 8vw, 128px);
  line-height: 0.93;
  text-transform: uppercase;
  color: var(--paper);
}

.contact__sub {
  margin: 28px 0 0;
  max-width: 560px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--paper-72);
  text-wrap: pretty;
}

.contact__actions {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

/* the footer is a separate landmark but shares the contact panel's ground,
   so the two read as one block */
.site-footer {
  background: var(--ink-raised);
  padding-bottom: 90px;
}

.footer-nav {
  margin-top: 110px;
  padding-top: 54px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 40px 32px;
}

.footer-col__head {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.footer-col__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col__link {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--paper-68);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-col__link:hover,
.footer-col__link:focus-visible { color: var(--paper); }

.footer-col__note {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.9;
  letter-spacing: 0.1em;
  color: var(--paper-45);
}

/* the legal line now closes the footer-nav band rather than the contact panel */
.site-footer__inner {
  margin-top: 64px;
  border-top: 1px solid var(--rule);
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.site-footer__legal {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--paper-45);
}

.site-footer__copy {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--paper-45);
}

.lang {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lang__current {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--paper);
  border: 1px solid var(--paper-30);
  padding: 5px 10px;
}

.lang__btn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--paper-40);
  background: none;
  border: 1px solid var(--rule-14);
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.lang__btn:hover { color: rgba(242, 237, 227, 0.7); }

.lang__note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.lang__note[hidden] { display: none; }

/* ---------- small screens ---------- */

@media (max-width: 699px) {
  /* one-scroll page: the nav links are redundant below this width, and
     cutting them is what keeps the header on a single row */
  .nav__link { display: none; }

  .hero__content { padding: 110px 24px 42px; }
  .hero__title {
    margin-top: 16px;
    font-size: clamp(44px, 13vw, 160px);
  }
  .hero__sub { margin-top: 20px; }
  .hero__actions { margin-top: 26px; }
  .hero__tagline { display: none; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}