/* ==========================================================================
   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;
}

/* Cyrillic (/bg/). Anton and Archivo have no Cyrillic glyphs at all, so the
   closest Cyrillic-capable faces stand in under the same family names:
   Oswald 700 for Anton, Inter for Archivo. The unicode-range keeps Latin
   brand names (Die Zeit, KOTLIN, …) in the originals, and the EN/DE pages
   never download these files. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/oswald-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- 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);
}

.clients__label--trust {
  margin: 20px 12px 0;
}

/* ---------------------------------------------------------------- *
 * Service pages (/services/*) — the one-pager's sections, reused    *
 * ---------------------------------------------------------------- */

/* The header is fixed, so the page hero clears it itself. */
.page-hero { padding: 190px 0 100px; }
.page-hero .section-intro { max-width: 760px; }

.card__more {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-decoration: none;
}
.card__more:hover,
.card__more:focus-visible { color: var(--paper); }

.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;
  /* Six cases, so the column count has to divide six. auto-fit used to land on
     five across and leave C/06 alone in its own row beside a hole. 3 / 2 / 1
     gives 2, 3 and 6 full rows instead. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

@media (max-width: 1099px) {
  .work-index { grid-template-columns: repeat(2, 1fr); }
}

.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);
}

/* A case is one plate, and it reads the way a newspaper page reads: kicker,
   headline, then the picture the headline is about, then the story under it.
   The picture carries no border of its own any more — it hangs from the rule
   beneath the headline and closes on the rule beneath its cutline, so the two
   lines that frame it are the plate's own lines rather than a box sitting on
   top of the text. Everything inside a plate is within ~34px; the next plate
   is 128px and a rule away. That ratio is what makes the grouping read. */
.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  column-gap: 80px;
  padding-bottom: 72px;
  /* the plate separator is the strongest line in the section; every rule
     inside a plate is lighter, so the grouping is legible at a glance */
  border-bottom: 1px solid var(--rule-18);
}

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

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

.case__head {
  grid-column: 1 / -1;
  padding: 56px 0 26px;
  border-bottom: 1px solid var(--rule);
}

/* The rule under the cutline closes the picture and hands the reader down to
   the story; it is the plate's line, the same width as the picture above it
   and the columns below. */
.case__media {
  grid-column: 1 / -1;
  margin: 0 0 34px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--rule);
}

.case__sticky { position: static; }

.case__story { grid-column: 1; }

/* The rail is a margin column, not a leftover: its hairline runs the whole
   height of the story, the outcome opens it beside the lede, and the stack is
   pinned to the foot so the column closes where the story closes. */
.case__rail {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 26px;
  border-left: 1px solid var(--rule);
  padding-left: 30px;
}

.case__index {
  margin: 0 0 14px;
  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(30px, 3.4vw, 48px);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--paper);
  text-wrap: balance;
}

.case__text {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--paper-68);
  text-wrap: pretty;
  max-width: 74ch;
}

.case__text:last-child { margin-bottom: 0; }

/* the lede carries the reader off the picture and into the story */
.case__story > .case__text:first-child {
  font-size: 19px;
  line-height: 1.6;
  color: var(--paper-80);
  margin-bottom: 22px;
}

.outcome {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--paper);
}

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

.case__rail > .tags {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

@media (max-width: 899px) {
  .case {
    grid-template-columns: 1fr;
    padding-bottom: 56px;
  }
  .case__head { padding: 44px 0 22px; }
  .case__story, .case__rail { grid-column: 1; }
  .case__rail {
    margin-top: 26px;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: 26px;
  }
  .case__rail > .tags {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .case__title { font-size: clamp(26px, 7vw, 34px); }
}

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

/* Cutline on the left, any controls the plate needs on the right — one line,
   sitting on the rule that closes the picture. */
.frame {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  column-gap: 32px;
}

.frame__box { grid-column: 1 / -1; }

/* Inside a case the box has no outline of its own: the rule under the headline
   is its top edge and the rule under the cutline is its bottom edge, so the
   picture sits in the plate instead of on it. */
.frame__box { background: var(--ink-raised); }

/* Each plate is cut to its own subject. A case declares --plate and the frame
   follows it, so the asset fills the box edge to edge instead of being
   letterboxed into one house ratio. */
.frame__inner {
  position: relative;
  width: 100%;
  aspect-ratio: var(--plate, 3 / 2);
}
.frame__inner--portrait { aspect-ratio: 4 / 5; }

/* C/01 keeps a single ratio for all four mastheads: the plate must not change
   height as the switcher cycles. The rest follow their asset. */
#case-02 { --plate: 233 / 199; }             /* the Scanfield artboard's 2330 x 1990 stage */
#case-03 { --plate: 608 / 461; }             /* the NewAgro artboard's 1216 x 922 stage */
#case-06 { --plate: 15 / 11; }               /* the AccountSolo artboard's 1800 x 1320 stage */

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

/* Each creative was composed on its own near-black ground; the frame carries
   that exact ground so the band reads as one plate rather than a picture with
   margins beside it. */
#case-02 .frame__box { background: #0E1014; }
#case-03 .frame__box { background: #0D131D; }
#case-04 .frame__box { background: #0A0E15; }
#case-06 .frame__box { background: #04070c; }

/* Some cases run the real thing rather than a picture of it: the design or the
   product itself, in an iframe, animations and all. It is the honest way to
   show software, and it survives any screen width without a crop. Clicks land
   inside (store badges open in a new tab), but the embedded pages themselves
   never scroll — each keeps its own document overflow:hidden, so the wheel
   chains straight through to this page instead of getting trapped. */
.frame__live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--ink-raised);
}

/* ---------- 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: contain;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Every case frame is the same 3:2 plate, so the media column never changes
   height as the page scrolls. Three of the masthead shots are photographed
   portrait, so each one sits centred on a plate mixed from the colours at its
   own edges — the ground continues rather than a letterbox appearing, and the
   plate colour becomes the masthead's signature as the switcher cycles.

   ZEIT is the exception: it is a wide 16:9 product shot, so contain left a
   visible seam where its white met the plate's. It is cropped to fill instead
   — the 7% taken off each side is empty margin, and the phones are centred. */
.switch__shot--zeit {
  object-fit: cover;
  background: linear-gradient(180deg, #f6f6f6, #f4f4f4 55%, #f3f3f3);
}
.switch__shot--morgenpost { background: linear-gradient(180deg, #034c21, #023e1b 55%, #003918); }
.switch__shot--morgen { background: linear-gradient(180deg, #202e48, #1b283d 55%, #192437); }
.switch__shot--vrm { background: linear-gradient(180deg, #1492cc, #0974a8 55%, #076997); }

.switch__tabs {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  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--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%, 20% { opacity: 1; }
  25%, 95% { opacity: 0; }
  100% { opacity: 1; }
}

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

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

.switch__shot--zeit, .switch__tab--zeit { animation-delay: 0s; }
.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);
  }
}

/* The cutline is the seam: it closes the picture and hands the reader down to
   the story on the same rule. */
.frame__cap {
  grid-column: 1;
  grid-row: 2;
  margin: 12px 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 */
/* The four things we build are a set, not a sequence, and the page has no
   bullet glyph anywhere else — it separates with hairlines. So each item is a
   ruled row, lighter than the rule that opens the pillar above it. */
.pillar__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rule);
}

.pillar__list li {
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.55;
  color: var(--paper-68);
  text-wrap: pretty;
}

/* ---------- 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__link {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--paper-40);
  text-decoration: none;
  border: 1px solid var(--rule-14);
  padding: 5px 10px;
  transition: color 0.2s ease;
}
.lang__link:hover { color: rgba(242, 237, 227, 0.7); }

/* ---------- 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; }

  .work-index { grid-template-columns: 1fr; }
}

/* ---------- 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;
  }
}

/* ---------------------------------------------------------------- *
 * Cookie consent — bar, preferences dialog (assets/js/consent.js).  *
 * Inert until a GA id is configured there.                          *
 * ---------------------------------------------------------------- */

.consent { position: relative; z-index: 80; }

.btn--ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--paper-30);
  cursor: pointer;
}
.btn--ghost:hover { border-color: var(--paper); }

.consent__bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ink-raised);
  border-top: 1px solid var(--rule-18);
}

.consent__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 26px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.consent__copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
}

.consent__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--paper-45);
}

.consent__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--paper-72);
}

.consent__link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--paper-45);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.consent__link:hover { color: var(--accent); }

.consent__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.consent__actions .btn { border-radius: 2px; }
.consent__actions .btn--accent { border: 1px solid var(--accent); cursor: pointer; }

.consent-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(13, 19, 29, 0.85);
}
.consent-overlay.is-open { display: flex; }

.consent-modal {
  width: 560px;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--ink-raised);
  border: 1px solid var(--rule-18);
  border-radius: 2px;
  padding: 40px 44px 36px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.consent-modal__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.consent-modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--paper);
}

.consent-modal__rows {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--paper);
}

.consent-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-14);
}

.consent-row__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.consent-row__key {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--paper);
}

.consent-row__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--paper-60);
  max-width: 360px;
}

.consent-row__fixed {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--paper-45);
  border: 1px solid var(--rule-18);
  border-radius: 999px;
  padding: 6px 12px;
  margin-top: 4px;
  white-space: nowrap;
}

.ctoggle {
  position: relative;
  margin-top: 6px;
  flex-shrink: 0;
  cursor: pointer;
}

.ctoggle__input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.ctoggle__track {
  display: block;
  width: 48px;
  height: 26px;
  border-radius: 999px;
  background: var(--rule-18);
  transition: background 0.15s ease;
}

.ctoggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--paper-45);
  transition: transform 0.15s ease, background 0.15s ease;
}

.ctoggle__input:checked + .ctoggle__track { background: var(--accent); }
.ctoggle__input:checked + .ctoggle__track .ctoggle__knob {
  transform: translateX(22px);
  background: var(--ink);
}
.ctoggle__input:focus-visible + .ctoggle__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.consent-modal__foot {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  line-height: 1.8;
  color: var(--paper-45);
}

@media (max-width: 760px) {
  .consent__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 26px 24px 30px;
    gap: 18px;
  }
  .consent__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .consent__actions .btn { justify-content: center; }
  .consent-modal { padding: 32px 24px 28px; }
  .consent-modal__title { font-size: 32px; }
}

/* Privacy page prose (/privacy/) */
.legal-body {
  display: flex;
  flex-direction: column;
  gap: 34px;
  max-width: 720px;
  padding-bottom: 130px;
}
.legal-body section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--rule-14);
  padding-top: 24px;
}
.legal-body h2 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--paper);
}
.legal-body p,
.legal-body li {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--paper-72);
}
.legal-body ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-body .legal-updated {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--paper-45);
}