/*
 * ─────────────────────────────────────────────────────────────────────
 *  cherifsansserif.com, Stylesheet
 *  Vanilla CSS, no preprocessor, hand-authored.
 *
 *  Architecture:
 *    1. Custom-property tokens (light/dark themes)
 *    2. Reset & typographic baseline
 *    3. Layout primitives (.wrap, .wrap--narrow)
 *    4. Components (nav, hero, project cards, case-study, footer)
 *    5. Utility & animation classes
 *    6. Responsive overrides at the end of each section
 * ─────────────────────────────────────────────────────────────────────
 */

/* =====================================================
   Portfolio, Hichem Cherif
   Functional · sans-serif · indigo accent · light + dark
   ===================================================== */

/* --- TYPE --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Press+Start+2P&display=swap');

/* --- TOKENS --- */
:root {
  /* Surfaces */
  --paper: #EDE8DD;
  --paper-soft: #E5E0D2;
  --paper-warm: #E9E3D6;
  --paper-pop: #DBD5C5;
  --card: #F2EDE2;

  /* Text */
  --ink: #0A0A0A;
  --ink-soft: #2A2A2A;
  --ink-faint: #6B6B6B;

  /* Lines */
  --rule: rgba(10, 10, 10, 0.10);

  /* Accent, deep indigo, used sparingly */
  --accent: #5C5F66;
  --accent-soft: rgba(142, 146, 160, 0.10);

  /* Status, green, used only for "Available now" */
  --status-green: #0A6E2C;
  --status-green-soft: rgba(10, 110, 44, 0.08);

  /* Selection highlight, soft indigo */
  --selection-bg: rgba(45, 63, 105, 0.18);
  --selection-fg: #0A0A0A;

  /* Functional category colours (sitemap legend etc.), desaturated */
  --cat-nav: #8E92A0;
  --cat-main: #6B6B6B;
  --cat-sub: #B8B8B8;
  --cat-social: #2A2A2A;

  --shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 8px 24px -8px rgba(10, 10, 10, 0.10);

  --font-display: 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SF Mono, Menlo, monospace;

  --measure: 65ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4rem, 10vw, 8rem);

  color-scheme: light;
}

/* Dark mode, OS preference (when no manual choice has been set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0A0A0A;
    --paper-soft: #141414;
    --paper-warm: #141414;
    --paper-pop: #1A1A1A;
    --card: #141414;

    --ink: #F5F5F5;
    --ink-soft: #C8C8C8;
    --ink-faint: #A0A0A0;

    --rule: rgba(245, 245, 245, 0.12);

    --accent: #B8BCC8;
    --accent-soft: rgba(184, 188, 200, 0.14);

    --status-green: #4ADE80;
    --status-green-soft: rgba(74, 222, 128, 0.10);

    --selection-bg: rgba(138, 164, 218, 0.30);
    --selection-fg: #F5F5F5;

    --cat-nav: #B8BCC8;
    --cat-main: #A0A0A0;
    --cat-sub: #4A4A4A;
    --cat-social: #C8C8C8;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -8px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
  }
}

/* Manual override, wins over OS preference */
:root[data-theme="dark"] {
  --paper: #0A0A0A;
  --paper-soft: #141414;
  --paper-warm: #141414;
  --paper-pop: #1A1A1A;
  --card: #141414;

  --ink: #F5F5F5;
  --ink-soft: #C8C8C8;
  --ink-faint: #A0A0A0;

  --rule: rgba(245, 245, 245, 0.12);

  --accent: #B8BCC8;
  --accent-soft: rgba(184, 188, 200, 0.14);

  --status-green: #4ADE80;
  --status-green-soft: rgba(74, 222, 128, 0.10);

  --selection-bg: rgba(138, 164, 218, 0.30);
  --selection-fg: #F5F5F5;

  --cat-nav: #B8BCC8;
  --cat-main: #A0A0A0;
  --cat-sub: #4A4A4A;
  --cat-social: #C8C8C8;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -8px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --paper: #EDE8DD;
  --paper-soft: #E5E0D2;
  --paper-warm: #E9E3D6;
  --paper-pop: #DBD5C5;
  --card: #F2EDE2;

  --ink: #0A0A0A;
  --ink-soft: #2A2A2A;
  --ink-faint: #6B6B6B;

  --rule: rgba(10, 10, 10, 0.10);

  --accent: #5C5F66;
  --accent-soft: rgba(142, 146, 160, 0.10);

  --status-green: #0A6E2C;
  --status-green-soft: rgba(10, 110, 44, 0.08);

  --selection-bg: rgba(45, 63, 105, 0.18);
  --selection-fg: #0A0A0A;

  --cat-nav: #8E92A0;
  --cat-main: #6B6B6B;
  --cat-sub: #B8B8B8;
  --cat-social: #2A2A2A;

  --shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 8px 24px -8px rgba(10, 10, 10, 0.10);

  color-scheme: light;
}

/* Selection highlight */
::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* --- TYPOGRAPHY --- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
}
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 7vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.display em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
h2 {
  font-size: clamp(1.875rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
h3 {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
p { margin: 0 0 1.25em; max-width: var(--measure); }
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--narrow {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --- NAV --- */
.nav {
  position: sticky;
  top: 8px;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid transparent;
  margin: 8px auto 0;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  box-shadow: 0 0 0 transparent;
  /* Only transition paint properties, geometry changes (margin/max-width/border-radius)
     snap instantly to avoid layout-thrash stutter on scroll boundary crossing. */
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    backdrop-filter 0.25s ease,
    -webkit-backdrop-filter 0.25s ease,
    background 0.25s ease;
}
.nav.scrolled {
  border-bottom-color: transparent;
  margin-top: 14px;
  max-width: calc(100% - 28px);
  border-radius: 999px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent),
    0 8px 32px -10px rgba(0, 0, 0, 0.14),
    0 2px 4px rgba(0, 0, 0, 0.06);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  backdrop-filter: blur(32px) saturate(1.9);
  -webkit-backdrop-filter: blur(32px) saturate(1.9);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav.scrolled {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent),
      0 8px 32px -10px rgba(0, 0, 0, 0.6),
      0 2px 4px rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"] .nav.scrolled {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent),
    0 8px 32px -10px rgba(0, 0, 0, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.4);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--gutter);
  max-width: 1280px;
  margin: 0 auto;
}
.nav.scrolled .nav__inner {
  padding: 0.75rem clamp(1.25rem, 3vw, 2rem);
}
.nav__links {
  display: flex;
  gap: 2.25rem;
  align-items: center;
}
.nav__link {
  font-size: 14px;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}
.nav__link:hover { color: var(--accent); }

/* Theme toggle button */

/* Language toggle */

/* --- HERO --- */
.hero {
  padding: clamp(5rem, 14vw, 11rem) 0 clamp(3rem, 7vw, 5.5rem);
}

/* --- WORK INDEX --- */
/* Seamless, no card around the media, the SVG carries its own ground colour. */
/* .project__cta legacy underline-link styling removed, pill style now owned by style.css */

/* Legacy 2-col side-by-side disabled, new vertical-stack layout in style.css */

/* === MORE WORK, smaller treatment for de-emphasized cases === */

/* --- ABOUT BLOCK ON HOME --- */

/* --- CASE STUDY PAGE --- */
.case-hero {
  padding: clamp(5rem, 12vw, 10rem) 0 clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.case-hero .hero__dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}
.case-hero > .wrap--narrow, .case-hero > .wrap { position: relative; z-index: 1; }
.case-hero__crumb {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2rem;
}
.case-hero__crumb a { border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.case-hero__crumb a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.case-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin-bottom: 2rem;
  max-width: 14ch;
}
.case-hero__title em { font-style: italic; color: var(--accent); }
.case-hero__lede {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.45;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 38ch;
}

.case-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 3rem 0;
  margin: 3rem 0 5rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.case-meta dt {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}
.case-meta dd {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.45;
}
@media (min-width: 640px) {
  .case-meta {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
  }
}

.case-section {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
.case-section h2 {
  font-style: italic;
  font-weight: 400;
  margin-bottom: 1.5rem;
  max-width: 18ch;
}
.case-section p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.case-figure__caption {
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 1rem;
  font-style: italic;
  font-family: var(--font-display);
  max-width: 50ch;
}

/* Constrained hero, single screenshot at controlled max-width, centered.
   Use when the existing case-figure default is making images too tall. */

/* Portrait screenshot, tall, narrow source. Don't upscale. */

/* Wider portrait, for images ~900-1200px wide, like heatmaps */

/* Hero-focused variant: clip below the fold to focus on the hero region */

/* --- PULL QUOTE / METRIC --- */

/* --- METRIC STRIP (stacked-3 numbers) --- */

/* --- NEXT PROJECT --- */
.next-project {
  margin-top: var(--section);
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-top: 1px solid var(--rule);
}
.next-project__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  display: inline-block;
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.3s ease;
}
.next-project a:hover .next-project__title {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* --- FOOTER --- */
.foot {
  border-top: 1px solid var(--rule);
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--paper);
}

/* --- REVEAL ANIMATION --- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 0.08s; }
.reveal--delay-2 { transition-delay: 0.16s; }
.reveal--delay-3 { transition-delay: 0.24s; }

/* No-JS fallback, show all reveals */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --- SELECTION --- */
::selection {
  background: var(--accent);
  color: var(--paper);
}

/* =====================================================
   DIAGRAM PRIMITIVES, CSS-built architecture diagrams
   ===================================================== */

/* Funnel architecture, horizontal stages */
.funnel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 900px) {
  .funnel {
    flex-direction: row;
    gap: 0;
  }
}

/* Vorher / Nachher comparison */
.compare::-webkit-scrollbar {
  height: 6px;
}
.compare::-webkit-scrollbar-track {
  background: transparent;
}
.compare::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 3px;
}

/* =====================================================
   HORIZONTAL SCROLL ROW, for sequential screen reveals
   ===================================================== */

.scroll-row {
  margin: clamp(3rem, 6vw, 5rem) 0;
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  position: relative;
}
@media (min-width: 1100px) {
  .scroll-row {
    margin-left: -120px;
    margin-right: -120px;
  }
}
.scroll-row__track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  padding: 0.5rem var(--gutter) 1.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.scroll-row__track::-webkit-scrollbar {
  height: 8px;
}
.scroll-row__track::-webkit-scrollbar-track {
  background: transparent;
}
.scroll-row__track::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 4px;
}
.scroll-row__track::-webkit-scrollbar-thumb:hover {
  background: var(--ink-faint);
}
.scroll-row__item {
  flex: 0 0 auto;
  width: clamp(280px, 65vw, 600px);
  max-height: 520px;
  scroll-snap-align: start;
  background: var(--paper-soft);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
}
.scroll-row__item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--paper-soft));
  pointer-events: none;
}
.scroll-row__item img {
  width: 100%;
  height: auto;
  display: block;
}
.scroll-row__caption {
  padding: 0 var(--gutter);
  margin-top: 1rem;
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
  font-family: var(--font-display);
  max-width: 50ch;
}
.scroll-row__hint {
  padding: 0 var(--gutter);
  margin-top: 0.75rem;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.scroll-row__hint::after {
  content: "→";
  font-size: 14px;
}

/* =====================================================
   DETAIL CROP, labeled focused screen detail
   Used for Heineken Order Review's three crops
   ===================================================== */

/* =====================================================
   HYPOTHESIS BREAKDOWN, labelled change-cards
   For PEAX hero variant analysis: each design change as
   a hypothesis with a stated "why".
   ===================================================== */
/* =====================================================
   MODAL CARD, recomposed UI element presented as artifact
   For Heineken "Add to Order Template" presentation.
   Built with HTML/CSS so it renders crisp at any zoom and
   adapts to dark mode natively.
   ===================================================== */

/* Heineken brand green, kept hardcoded since it's the actual
   product brand colour, not part of the portfolio token system */

/* Dark mode adjustment, soften the white card and warm the frame */

/* =====================================================
   ARCHITECTURE DIAGRAM, hub + branches
   For Heineken's "Core Store + Markets" structure.
   ===================================================== */

/* =====================================================
   SITEMAP, PEAX V2 hierarchical IA
   ===================================================== */

/* The 5-swatch legend */

/* Home node, central, teal */

/* Floating row, Hinweis Cookies + Support, dashed connectors */
/* Vertical trunk down from Home to branches */

/* The branches grid */

/* Each branch column */
/* Subnav header within a branch (gray label like "Digitaler Briefkasten") */

/* Leaf node */

/* Bottom callouts */

/* =====================================================
   EXPLORATION GRID, hypothesis cards
   For StepStone's 4-hypothesis pricing exploration.
   ===================================================== */

/* =====================================================
   DUAL-PERSPECTIVE DIAGRAM, for obseed
   Two views (athlete + coach) sharing one data + design layer.
   ===================================================== */

/* Mini visualisation of the layout */

/* Connector showing they share a common foundation */

/* =====================================================
   DESIGN-SYSTEM OVERRIDES, applied last, win all cascades
   New visual language: sans-serif Inter, indigo accent,
   no italic-as-decoration, white/black surfaces.
   ===================================================== */

/* Inter everywhere, both --font-display and --font-sans now point to Inter */
body, h1, h2, h3, p, a, button, input, select,
.display, .case-section h2, .case-hero__title, .case-hero__lede, .next-project__title, .case-figure__caption, .scroll-row__caption {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-style: normal !important;
}

/* Neutralise <em> globally, emphasis through weight, not italic + color */
em {
  font-style: normal !important;
  font-weight: 600 !important;
  color: inherit !important;
}

/* Only the home hero accent retains the indigo color, "prove it with numbers" */

/* Heading weights, Inter looks heavier than serif at the same size,
   so reduce font-weight slightly */
.display {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.12 !important;
}

.case-hero__title, .next-project__title {
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}

.case-section h2 {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Pull quotes, drop the big italic editorial moment, make them tighter */

/* Metric strip, indigo replaces orange for big numbers, tabular figures */

/* .project__cta legacy indigo override removed, pill styles owned by style.css */
.next-project a {
  text-decoration: none !important;
  color: var(--accent) !important;
}

/* Body backgrounds, drop cream paper-soft from major surfaces */
body { background: var(--paper) !important; }

/* Case figure frames, neutralise paper-warm/paper-soft tints */

/* Image inside the framed figures, softer shadow, lighter rounding */

/* Hypothesis cards, match new system */

/* Architecture / funnel / sitemap diagrams, desaturate to match */

/* Compare diagram (Finanzcheck before/after) */

/* Sitemap v2 callout pills */

/* Modal card frame (Heineken templating), drop peach tint */

/* Reference quotes, drop italic, use weight + neutral color */

/* Detail crops (Heineken Order Review) */

/* Nav, restrained — hover mirrors the active state (ink + underline) */
.nav__link:hover { color: var(--ink) !important; }

/* Hero meta link */

/* Case figure captions */
.case-figure__caption,
.scroll-row__caption,
figcaption {
  font-style: normal !important;
}

/* Project cards on home, tag pills */

/* .project__cta indigo-link styling removed, pill style owned by style.css */

/* More-work cards, match new system */

/* Footer, drop the big italic emphasis */
/* Display sizing, tuned for Inter at weight 600, smaller than the serif version */
.display {
  font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  font-weight: 600 !important;
}
.case-hero__title {
  font-size: clamp(1.875rem, 4vw, 3rem) !important;
  line-height: 1.12 !important;
  max-width: 22ch;
}
 .next-project__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  line-height: 1.18 !important;
}
.case-section h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
  line-height: 1.18 !important;
}

/* Case meta grid, 3 cells (Year removed), max 2 rows, scrollable on narrow */
.case-meta {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
  border-top: 0.5px solid var(--rule) !important;
  border-bottom: 0.5px solid var(--rule) !important;
  padding: 1.25rem 0 !important;
  margin: 1.5rem 0 0 !important;
}
.case-meta > div { min-width: 0; }
.case-meta dt {
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ink-faint) !important;
  font-weight: 500 !important;
  font-family: var(--font-sans) !important;
  margin-bottom: 4px !important;
}
.case-meta dd {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
  font-style: normal !important;
}
@media (max-width: 700px) {
  .case-meta {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    gap: 2rem !important;
    padding-bottom: 1rem !important;
    -webkit-overflow-scrolling: touch;
  }
  .case-meta > div {
    flex: 0 0 auto;
    min-width: 140px;
  }
}

/* Hand-drawn gold marker, applied to specific case-section headings */
.case-section__title--marked {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}
.case-section__title--marked::after {
  content: '';
  position: absolute;
  left: -2%;
  right: -4%;
  bottom: -2px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14' preserveAspectRatio='none'><path d='M3 8 C 30 5, 70 11, 110 7 S 180 5, 218 9' stroke='%23D4AF37' stroke-width='14' fill='none' stroke-linecap='round' opacity='0.55'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: -1;
}
:root[data-theme="dark"] .case-section__title--marked::after,
:root:not([data-theme="light"]) .case-section__title--marked::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14' preserveAspectRatio='none'><path d='M3 8 C 30 5, 70 11, 110 7 S 180 5, 218 9' stroke='%23E5C76A' stroke-width='14' fill='none' stroke-linecap='round' opacity='0.45'/></svg>");
}

/* =====================================================
   Product Lists, three real screenshot crops
   Native size, horizontal row, scroll on narrow screens
   ===================================================== */

/* Cards displayed at fixed width, proper sizing for the proper exports */

/* =====================================================
   Polish pass, nav spacing, hero credentials, card row, dot matrix
   ===================================================== */

/* 1. Nav top spacing, initial state floats with breathing room */
.nav {
  margin-top: 14px !important;
  max-width: calc(100% - 28px) !important;
  border-radius: 999px !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent),
    0 4px 18px -8px rgba(0, 0, 0, 0.10) !important;
  background: color-mix(in srgb, var(--paper) 80%, transparent) !important;
}
.nav.scrolled {
  margin-top: 14px !important;
  max-width: calc(100% - 28px) !important;
  background: color-mix(in srgb, var(--paper) 70%, transparent) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent),
    0 8px 32px -10px rgba(0, 0, 0, 0.14),
    0 2px 4px rgba(0, 0, 0, 0.06) !important;
}
/* Make credential row sit on the same line as the status pill */

/* 3. Cards alignment, pin to top, equal heights via stretch */

/* 4. Interactive dot matrix, canvas behind hero */
.hero {
  position: relative;
  overflow: hidden;
}
.hero__dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  /* Fade out toward the bottom so it transitions into the page */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}
.hero > .wrap {
  position: relative;
  z-index: 1;
}

/* =====================================================
   Iteration batch, nav spacing, hero CTA, footer, mobile menu
   ===================================================== */

/* 1. Nav: 16px from top (was 14px), more glassy effect */
.nav {
  margin-top: 16px !important;
  background: color-mix(in srgb, var(--paper) 65%, transparent) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
}
.nav.scrolled {
  margin-top: 16px !important;
  background: color-mix(in srgb, var(--paper) 60%, transparent) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
}


/* CTA, plain link, no pill */

/* 3. Footer, copyright | center | controls */
.foot {
  padding: clamp(2rem, 4vw, 3rem) 0;
  margin-top: clamp(4rem, 8vw, 6rem);
  border-top: 0.5px solid var(--rule);
  background: var(--paper);
}
.foot__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-faint);
}
.foot__copyright {
  text-align: left;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.foot__center {
  text-align: center;
  color: var(--ink-soft);
}
.foot__controls {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  align-items: center;
}

/* Footer responsive, hide controls on mobile, stack rows on narrow */
@media (max-width: 700px) {
  .foot__row {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.5rem;
  }
  .foot__copyright,
  .foot__center {
    text-align: center;
  }
  .foot__controls {
    display: none; /* Hide on mobile, toggles live in the mobile menu */
  }
}

/* 4. Hamburger button, visible only at mobile breakpoint */

/* Hamburger morph, when overlay is open, transform bars into X */
body.menu-open .nav__hamburger__bar:nth-child(1),
.mobile-menu__close .nav__hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.menu-open .nav__hamburger__bar:nth-child(2),
.mobile-menu__close .nav__hamburger__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
body.menu-open .nav__hamburger__bar:nth-child(3),
.mobile-menu__close .nav__hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Breakpoint for nav: switch to hamburger below 720px */
@media (max-width: 720px) {
  .nav__links {
    display: none;
  }
  .nav__inner {
    padding: 0.875rem 1.25rem;
  }
}

/* 5. Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  overflow: hidden;
}
body.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s linear 0s;
}
.mobile-menu__dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0.2) 100%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0.2) 100%);
}
.mobile-menu__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 1.25rem 1.5rem 2rem;
}
.mobile-menu__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-menu__logo {
  text-decoration: none;
  color: var(--ink) !important;
}
.mobile-menu__close {
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.mobile-menu__close:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.mobile-menu__close .nav__hamburger__bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
  align-items: stretch;
}
.mobile-menu__close .nav__hamburger__bar {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transform-origin: center;
}
.mobile-menu__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.25rem;
  font-family: 'Inter', system-ui, sans-serif;
  padding: 2rem 0;
}
.mobile-menu__link {
  font-size: clamp(2rem, 6vw, 2.5rem);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
  line-height: 1.1;
  position: relative;
  transition: color 0.2s ease, transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
  /* Initial state: invisible + slid down a bit */
  opacity: 0;
  transform: translateY(12px);
}
.mobile-menu__link:hover {
  color: var(--accent);
}
/* Stagger entrance, only when menu is open */
body.menu-open .mobile-menu__link {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.2s ease;
}
body.menu-open .mobile-menu__link[data-stagger="0"] { transition-delay: 0.10s; }
body.menu-open .mobile-menu__link[data-stagger="1"] { transition-delay: 0.15s; }
body.menu-open .mobile-menu__link[data-stagger="2"] { transition-delay: 0.20s; }

.mobile-menu__controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.4s ease 0.30s;
}
body.menu-open .mobile-menu__controls {
  opacity: 1;
}

/* When body has menu-open, lock scroll */
body.menu-open {
  overflow: hidden;
}

/* Hide hero theme toggle / lang toggle on mobile (they live in menu now).
   Scoped to .nav so the same buttons inside the mobile menu stay visible. */

/* Fix: foot theme toggle, explicit moon visibility in light mode */

/* === Section refinements === */

/* 1. Nav: transparent at page top, glass pill only when scrolling */
.nav:not(.scrolled) {
  margin-top: 16px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
  max-width: 100% !important;
  border-radius: 0 !important;
}
.nav:not(.scrolled) .nav__inner {
  /* Same internal padding so layout doesn't jump */
  padding: 1.25rem var(--gutter);
}
.nav.scrolled {
  background: color-mix(in srgb, var(--paper) 60%, transparent) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent),
    0 8px 32px -10px rgba(0, 0, 0, 0.14),
    0 2px 4px rgba(0, 0, 0, 0.06) !important;
  margin-top: 16px !important;
  max-width: calc(100% - 28px) !important;
  border-radius: 999px !important;
}

/* 2. CTA arrow: slide in on hover from the left of "Let's talk shop" */

/* 3. Footer: drop top border, give it room for the dot matrix */
.foot {
  border-top: none !important;
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem) !important;
}
.foot__dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  /* Fade up into the section above */
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
}
.foot > .wrap {
  position: relative;
  z-index: 1;
}

/* 4. Footer location pill, sits in the right slot when controls visible,
   takes the right slot when controls hidden on mobile */
.foot__row {
  grid-template-columns: 1fr auto 1fr !important;
}
.foot__controls {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.foot__location {
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Mobile: controls hidden, location takes its place on the right */
@media (max-width: 700px) {
  .foot__row {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 0.75rem !important;
  }
  .foot__controls {
    /* Override the previous "display: none" on mobile: keep location visible */
    display: flex !important;
    justify-content: center;
  }
  .foot__location {
    text-align: center;
  }
}

/* 5. Heart shape: refined symmetric pixel art (already updated in HTML) */
.foot__heart {
  color: var(--accent);
}

/* 6. Hero CTA: ensure clean line transitions to footer (no border) */
.hero {
  border-bottom: none;
}

/* === Polish === */

/* 1. Hero canvas extends ABOVE the nav (behind it at page top).
      Combined with transparent nav, the dot field flows seamlessly
      through where the nav lives. */
.hero {
  position: relative;
  margin-top: -100px;       /* pull the hero up so canvas covers nav area */
  padding-top: 100px;       /* push the content back down */
}
.hero__dots {
  top: 0 !important;
  height: 100% !important;
  /* Fade strongly toward bottom only */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%) !important;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%) !important;
}

/* 2. Footer dot canvas extends upward to cover the last section
      (the "Let's take on product challenges" CTA section).
      Achieved by making the footer canvas itself taller and positioning
      it to bleed above the footer's top edge. */
.foot {
  position: relative;
  overflow: visible !important;  /* allow canvas to extend above footer */
}
.foot__dots {
  position: absolute;
  left: 0;
  right: 0;
  /* Reach up into the section above the footer */
  top: -400px !important;
  height: calc(100% + 400px) !important;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%) !important;
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%) !important;
}

/* 3. Heart turns red on hover of the footer center */
.foot__center {
  cursor: default;
  transition: color 0.2s ease;
}
.foot__heart {
  transition: color 0.25s ease, transform 0.25s ease;
}
.foot__center:hover .foot__heart {
  color: #E11D48 !important;
  transform: scale(1.15);
}

/* 4. Footer controls dropped, toggle buttons gone, only location stays */
.foot__controls {
  /* Reduce gap since only location lives here now */
  gap: 0 !important;
  justify-content: flex-end !important;
}
@media (max-width: 700px) {
  .foot__controls {
    justify-content: center !important;
  }
}

/* 5. "Let's talk shop", solid pill CTA matching the PDF reference
      Indigo background (light) / lighter indigo (dark), white text,
      arrow always visible, subtle hover lift */
/* Arrow always visible inside pill, overrides previous slide-on-hover rules */

/* === Case study layout === */

/* 1. Drop the line above "Next case study", seamless flow */
.next-project {
  border-top: none !important;
}

/* 2. Dot matrix on case study hero, same as home hero */
.case-hero {
  position: relative;
  overflow: hidden;
}
.case-hero .hero__dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
}
.case-hero > .wrap,
.case-hero > .wrap--narrow {
  position: relative;
  z-index: 1;
}

/* 3. Metric strip, redesign as small tabular signature row at the bottom
      (was: big numbers competing with pull-quote)
      Now: small label + small value, monospace value, horizontal rule below
      hero hierarchy. Reads as credentials, not as headline metric. */

/* === Reveal & scroll === */

/* 1. Off-white paper for LIGHT MODE ONLY, do not touch dark mode tokens.
   Updated below in the explicit light-mode :root rules. */

/* 2. Hero, restore breathing room. Keep canvas behind nav but give content space. */
.hero {
  margin-top: -100px !important;
  padding-top: 180px !important;     /* was 100px, give credentials room to breathe */
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

/* 3. Nav, proper 16px from top of page (not from edge of body which has implicit margins) */
.nav:not(.scrolled) {
  margin-top: 24px !important;       /* visible distance from page top */
}
.nav.scrolled {
  margin-top: 16px !important;
}

/* 4. CTA, arrow hidden by default, slides in on hover/focus/active */

/* 5. Heart click animation, Mario-style +1 popup */
.foot__center {
  cursor: pointer;
  user-select: none;
  position: relative;
}
@keyframes plusOne {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -60px) scale(1);
  }
}

/* 6. Mobile footer, show all three items, well-positioned */
@media (max-width: 700px) {
  .foot__row {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    text-align: center !important;
  }
  .foot__copyright,
  .foot__center,
  .foot__controls,
  .foot__location {
    text-align: center !important;
    justify-content: center !important;
    margin: 0 auto;
  }
  /* Make sure location is visible inside the (hidden-controls) controls slot */
  .foot__controls {
    display: flex !important;
  }
  .foot__location {
    display: block;
    width: 100%;
  }
}

/* === Clickable rows & page transitions === */

/* Whole project row clickable */

/* Row dim feedback while click → navigate is mid-flight */
.project__link.is-leaving {
  opacity: 0.85;
  transition: opacity 80ms ease;
}

/* Page transition, fade out before leaving, fade in on arrival */
body {
  opacity: 1;
  transition: opacity 260ms ease;
}
body.is-leaving {
  opacity: 0;
}

/* Page transition, defensive: never let body get stuck invisible.
   If JS hasn't run yet (slow load, Chrome bfcache restore), body stays at 1. */
body { opacity: 1; }
body.is-leaving { opacity: 0; transition: opacity 260ms ease; }
body:not(.is-leaving) { transition: opacity 260ms ease; }

/* === Pull-quotes & footer === */

/* PULL-QUOTE redesigned, restrained, less obtrusive.
   Was: huge serif number on a soft card with border.
   Now: medium-weight inline metric + label, single thin top rule, no card. */

/* Project rows: drop the hover background, keep title color highlight only */

/* Add gold-marker style to "What I took from it" sections in Finanzcheck and PEAX Website
   (the existing class is .case-section__title--marked, already applied via HTML changes below) */

/* === About page typography === */


/* 2. Fact strip, credentials line, same visual register as the case-study metric strip */


/* === Scroll-reveal saturation === */

/* Reveal-once: body content starts faded, becomes fully saturated
   as it enters the viewport. Subtle, restrained.
   Applied via .scroll-fade class, triggered by IntersectionObserver. */
.scroll-fade {
  opacity: 0.4;
  transform: translateY(6px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}
.scroll-fade.is-revealed {
  opacity: 1;
  transform: none;
}

/* Honor prefers-reduced-motion, static, no fade */
@media (prefers-reduced-motion: reduce) {
  .scroll-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* About page, body copy matches the home project excerpts (17px / 1.55 / soft / 56ch) */
main.wrap--narrow .case-section p {
  font-size: 1.0625rem !important;
  line-height: 1.55 !important;
  color: var(--ink-soft) !important;
  max-width: 56ch !important;
}
/* References quotes preserve their italic serif treatment, undo the override there */
/* Pull-out opener, italic guillemet quote, larger, sits alone */

/* About hero, force "grounded in data" / "die auf Daten basieren" to its own line on desktop+ */

/* === About page company strip === */

/* Worked-with strip, monospace wordmarks, editorial restraint */

/* === Home thesis section === */

/* Mobile: stack noun above body, smaller noun */

/* === Mobile menu animation === */

/* === Status indicator === */

.approach {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(1rem, 2vw, 2rem);
}

/* === Easter-egg pixel-art === */

/* Work index lede sized to match home hero__sub (smaller than case-study ledes) */

/* === Hero alignment unification === */

/* Case meta, role/engagement/recognition strip below hero lede */
.case-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2rem;
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 0.5px solid var(--rule);
}
.case-meta div { margin: 0; }
.case-meta dt {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  margin: 0 0 4px;
}
.case-meta dd {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
}
@media (max-width: 720px) {
  .case-meta {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Case section bullets */
.case-bullets {
  list-style: none;
  margin: 1rem 0 1.5rem;
  padding: 0;
}
.case-bullets li {
  position: relative;
  padding-left: 1.25rem;
  margin: 0 0 0.875rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.case-bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--ink-faint);
}
.case-bullets li strong {
  color: var(--ink);
  font-weight: 600;
}

/* Case quote, pulled testimonial / arbeitszeugnis */
.case-quote {
  margin: 2rem 0;
  padding: 1.25rem 0 1.25rem 1.5rem;
  border-left: 2px solid var(--accent);
}
.case-quote p {
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 0.75rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.case-quote cite {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--ink-faint);
  font-family: 'Inter', system-ui, sans-serif;
}

/* Case diagram, figure containing inline SVG + caption */
.case-diagram {
  margin: 2.5rem 0;
}
.case-diagram svg {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}
.case-diagram__caption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-faint);
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 0.5px solid var(--rule);
  max-width: 56ch;
}

/* ===== SVG diagram theming ===== */

/* DG = Diagram (Before/After scope) */
.dg-eyebrow { font-family: 'Inter', system-ui, sans-serif; font-size: 9px; fill: var(--ink-faint); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
.dg-rule { stroke: var(--rule); stroke-width: 0.5; fill: none; }
.dg-box { fill: none; stroke: var(--ink); stroke-width: 1; }
.dg-box-faint { fill: none; stroke: var(--ink-faint); stroke-width: 0.6; stroke-dasharray: 3 3; }
.dg-fill-accent { fill: var(--accent); }
.dg-label { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; fill: var(--ink); }
.dg-label-faint { font-family: 'Inter', system-ui, sans-serif; font-size: 10px; fill: var(--ink-faint); }
.dg-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; fill: var(--ink-soft); letter-spacing: 0.02em; }
.dg-arrow { stroke: var(--ink-faint); stroke-width: 0.8; fill: none; }

/* RM = Room (Workshop room composition) */
.rm-eyebrow { font-family: 'Inter', system-ui, sans-serif; font-size: 9px; fill: var(--ink-faint); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
.rm-rule { stroke: var(--rule); stroke-width: 0.5; fill: none; }
.rm-box { fill: none; stroke: var(--ink); stroke-width: 0.8; }
.rm-box-self { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.rm-label { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; fill: var(--ink); }
.rm-label-soft { font-family: 'Inter', system-ui, sans-serif; font-size: 10px; fill: var(--ink-soft); }
.rm-self { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; fill: var(--accent); font-weight: 600; }
.rm-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; fill: var(--ink-soft); }
.rm-conn { stroke: var(--ink-faint); stroke-width: 0.8; stroke-dasharray: 3 4; fill: none; }

/* CD = Cadence (Workshop cadence rotation) */

/* SD = Scope Decision (Hardest call diagram) */
.sd-eyebrow { font-family: 'Inter', system-ui, sans-serif; font-size: 9px; fill: var(--ink-faint); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
.sd-rule { stroke: var(--rule); stroke-width: 0.5; fill: none; }
.sd-box { fill: none; stroke: var(--ink); stroke-width: 0.8; }
.sd-box-faint { fill: none; stroke: var(--ink-faint); stroke-width: 0.6; stroke-dasharray: 3 3; }
.sd-box-accent { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.sd-label { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; fill: var(--ink); }
.sd-label-soft { font-family: 'Inter', system-ui, sans-serif; font-size: 10px; fill: var(--ink-soft); }
.sd-label-faint { font-family: 'Inter', system-ui, sans-serif; font-size: 10px; fill: var(--ink-faint); }
.sd-fill-accent { fill: var(--accent); }
.sd-arrow { stroke: var(--ink); stroke-width: 1; fill: none; }
.sd-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; fill: var(--ink-soft); }

/* === Misc spacing & contrast === */

/* Hidden link revealed after 3 heart clicks, Mario-game-coded pixel-art reward */
.foot__easter-link.is-shown {
  opacity: 1;
  transform: translateY(0);
}
/* Visually hidden but readable by screen readers */

/* === Misc === */

.foot__location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.foot__status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-green);
  flex-shrink: 0;
}

/* === StepStone email-variations diagram === */

/* EV = Email Variations (notifications redesign diagram) */

/* === Finanzcheck funnel diagram === */

/* FN = Funnel (before/after credit funnel diagram) */
.fn-eyebrow { font-family: 'Inter', system-ui, sans-serif; font-size: 9px; fill: var(--ink-faint); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
.fn-eyebrow.fn-winner { fill: var(--accent); }
.fn-rule { stroke: var(--rule); stroke-width: 0.5; fill: none; }
.fn-box-faint { fill: none; stroke: var(--ink-faint); stroke-width: 0.6; stroke-dasharray: 3 3; }
.fn-box-winner { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.fn-box-winner-input { fill: none; stroke: var(--ink); stroke-width: 1; }
.fn-box-winner-cta { fill: var(--ink); stroke: none; }
.fn-bar-faint { fill: var(--ink-faint); fill-opacity: 0.06; stroke: none; }
.fn-bar-track { fill: var(--ink-faint); fill-opacity: 0.15; stroke: none; }
.fn-bar-fill { fill: var(--accent); stroke: none; }
.fn-line-faint { stroke: var(--ink-faint); stroke-width: 1; opacity: 0.5; }
.fn-label-faint { font-family: 'Inter', system-ui, sans-serif; font-size: 10px; fill: var(--ink-faint); }
.fn-label-winner { font-family: 'Inter', system-ui, sans-serif; font-size: 10px; fill: var(--accent); font-weight: 600; }
.fn-label-winner-h { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; fill: var(--ink); font-weight: 600; }
.fn-input-text { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; fill: var(--ink); }
.fn-cta-text { font-family: 'Inter', system-ui, sans-serif; font-size: 12px; fill: var(--paper); font-weight: 600; }
.fn-mono-winner { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; fill: var(--ink-soft); letter-spacing: 0.04em; }

/* === Diagram thumbnails on overview === */

/* Thumb diagram styles, shared by all overview thumbnails */
.thumb-eyebrow { font-family: 'Inter', system-ui, sans-serif; font-size: 9px; fill: var(--ink-faint); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.thumb-eyebrow.thumb-accent { fill: var(--accent); }
.thumb-rule { stroke: var(--rule); stroke-width: 0.5; fill: none; }
.thumb-box-faint { fill: none; stroke: var(--ink-faint); stroke-width: 0.6; stroke-dasharray: 2 2; }
.thumb-box-accent { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.thumb-box-strong { fill: none; stroke: var(--ink); stroke-width: 1; }
.thumb-mono-strong { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; fill: var(--ink); letter-spacing: 0.02em; font-weight: 600; }

/* === Mobile hero rework === */

@media (max-width: 720px) {
  /* Home hero, Products that work. Proven with numbers. */
  .hero {
    padding: clamp(5rem, 22vw, 8rem) 0 clamp(3rem, 10vw, 5rem) !important;
    min-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  /* Case study heroes, Heineken, StepStone, Finanzcheck */
  .case-hero {
    padding: clamp(4.5rem, 18vw, 7rem) 0 clamp(2.5rem, 8vw, 4rem) !important;
    min-height: 70vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  .case-hero__crumb {
    margin-bottom: 1.75rem !important;
  }
  .case-hero__title {
    font-size: clamp(2.25rem, 9.5vw, 3.5rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.03em !important;
    max-width: 16ch !important;
    margin-bottom: 1.5rem !important;
  }
  .case-hero__lede {
    font-size: 16px !important;
    line-height: 1.55 !important;
    max-width: 36ch !important;
  }

  /* About hero, work-index hero, same family */
}

/* Even tighter on very narrow phones */
@media (max-width: 380px) {
  .case-hero__title {
    font-size: clamp(2rem, 8.5vw, 3rem) !important;
    max-width: 14ch !important;
  }
}


/* === GPU-composite hints for heavily animated elements === */
.foot__heart {
  will-change: transform;
}
.reveal,
.scroll-fade {
  will-change: opacity, transform;
}
.reveal.is-revealed,
.scroll-fade.is-revealed {
  /* Stop hinting after the animation completes */
  will-change: auto;
}