/*
 * ─────────────────────────────────────────────────────────────────────
 *  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-serif: '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, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
}
.display {
  font-family: var(--font-serif);
  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); }
.lede {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.45;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
  max-width: 30ch;
}

/* --- LAYOUT --- */
.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__logo {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
}
.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 */
.nav__theme-toggle {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  margin-left: 0.5rem;
  font-size: 14px;
  line-height: 1;
}
.nav__theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.nav__theme-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
}
.nav__theme-toggle .icon-sun { display: none; }
.nav__theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .nav__theme-toggle .icon-sun,
.nav__theme-toggle[data-resolved="dark"] .icon-sun {
  display: block;
}
:root[data-theme="dark"] .nav__theme-toggle .icon-moon,
.nav__theme-toggle[data-resolved="dark"] .icon-moon {
  display: none;
}

/* Language toggle */
.nav__lang-toggle {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  height: 32px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.5rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  gap: 0.25rem;
}
.nav__lang-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.nav__lang-toggle__current {
  color: var(--ink);
  font-weight: 600;
}
.nav__lang-toggle__divider {
  opacity: 0.3;
}
.nav__lang-toggle__other {
  opacity: 0.6;
}

/* --- HERO --- */
.hero {
  padding: clamp(5rem, 14vw, 11rem) 0 clamp(3rem, 7vw, 5.5rem);
}
.hero__greeting {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--ink-faint);
  margin-bottom: 1.5rem;
}
.hero__headline {
  margin-bottom: 2rem;
  max-width: 18ch;
}
.hero__sub {
  font-size: 1.125rem;
  color: var(--ink-soft);
  max-width: 50ch;
  line-height: 1.55;
}
.hero__meta {
  margin-top: 3rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--ink-faint);
}
.hero__meta a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.hero__meta a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* --- WORK INDEX --- */
.work-index { padding: var(--section) 0; }
.work-index__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.work-index__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.02em;
}

.project {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: 5rem 0;
  border-bottom: 1px solid var(--rule);
}
.project:last-child { border-bottom: none; }
.project__media {
  position: relative;
  overflow: hidden;
  background: var(--paper-soft);
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  transition: box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.project:hover .project__media { box-shadow: var(--shadow); }

.project__content { padding: 0; }
.project__index {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 0.875rem;
}
.project__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}
.project__title em { font-style: italic; color: var(--accent); }
.project__excerpt {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: 1.75rem;
}
.project__meta {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-faint);
  margin-bottom: 1.75rem;
}
.project__meta span { position: relative; }
.project__meta span:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: -0.875rem;
}
.project__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
}
.project__cta:hover {
  color: var(--accent);
  border-color: var(--accent);
  gap: 0.875rem;
}
.project__cta::after {
  content: "→";
  font-size: 1rem;
  line-height: 1;
}

@media (min-width: 768px) {
  .project {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }
  .project--reverse .project__media { order: 2; }
  .project--reverse .project__content { order: 1; }
}

/* === MORE WORK — smaller treatment for de-emphasized cases === */
.more-work {
  border-top: 1px solid var(--rule);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(1rem, 3vw, 2rem);
}
.more-work__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
}
.more-work__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  margin: 0;
  color: var(--ink);
}
.more-work__sub {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
  margin: 0;
}
.more-work__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 720px) {
  .more-work__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
.more-work__card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 1.5rem 1.5rem 1.75rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--card);
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.more-work__card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.more-work__index {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.625rem;
}
.more-work__name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0 0 0.625rem;
  color: var(--ink);
  line-height: 1.3;
}
.more-work__excerpt {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.more-work__cta {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.02em;
}

/* --- ABOUT BLOCK ON HOME --- */
.about-strip {
  padding: var(--section) 0;
  border-top: 1px solid var(--rule);
}
.about-strip__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
.about-strip__label {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.about-strip__body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 28ch;
}
.about-strip__body em { font-style: italic; color: var(--accent); }

@media (min-width: 768px) {
  .about-strip__inner {
    grid-template-columns: 200px 1fr;
    gap: 5rem;
  }
}

/* --- CASE STUDY PAGE --- */
.case-hero {
  padding: clamp(5rem, 12vw, 10rem) 0 clamp(3rem, 6vw, 5rem);
}
.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-serif);
  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-serif);
  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 {
  margin: clamp(3rem, 6vw, 5rem) 0;
}
.case-figure__media {
  background: var(--paper-soft);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
}
.case-figure__media img { width: 100%; display: block; }
.case-figure__caption {
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 1rem;
  font-style: italic;
  font-family: var(--font-serif);
  max-width: 50ch;
}

.case-figure--full {
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
}
@media (min-width: 1280px) {
  .case-figure--full {
    margin-left: calc((100vw - 1280px) / -2 - var(--gutter));
    margin-right: calc((100vw - 1280px) / -2 - var(--gutter));
  }
}

.case-figure--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .case-figure--grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

/* Grid height normalization — prevents images of different aspect ratios
   from creating uneven rows. Used when source files have artifact strips
   on edges (Sketch export bleed). */
.case-figure--grid--normalized .case-figure__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-soft);
  border-radius: 4px;
}
.case-figure--grid--normalized .case-figure__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Constrained hero — single screenshot at controlled max-width, centered.
   Use when the existing case-figure default is making images too tall. */
.case-figure--constrained {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.case-figure--constrained .case-figure__media {
  background: var(--paper-soft);
  padding: 1.25rem;
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.case-figure--constrained .case-figure__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

/* Portrait screenshot — tall, narrow source. Don't upscale. */
.case-figure--portrait {
  display: flex;
  justify-content: center;
  background: var(--paper-soft);
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
  border-radius: 4px;
}
.case-figure--portrait img {
  max-width: 480px;
  width: 100%;
  height: auto;
  box-shadow: var(--shadow);
  border-radius: 4px;
}
.case-figure--portrait .case-figure__media {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* Wider portrait — for images ~900-1200px wide, like heatmaps */
.case-figure--portrait-wide {
  display: flex;
  justify-content: center;
  background: var(--paper-soft);
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 2vw, 1.5rem);
  border-radius: 4px;
}
.case-figure--portrait-wide img {
  max-width: 600px;
  width: 100%;
  height: auto;
  box-shadow: var(--shadow);
  border-radius: 4px;
}

/* Mobile screenshot — shown small with breathing room */
.case-figure--mobile {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: var(--paper-soft);
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 4px;
  min-height: 320px;
  max-height: 720px;
  overflow: hidden;
  position: relative;
}
.case-figure--mobile::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--paper-soft));
  pointer-events: none;
}
.case-figure--mobile img {
  max-width: 240px;
  width: 100%;
  height: auto;
  box-shadow: var(--shadow);
  border-radius: 18px;
}

/* Mobile pair — two phone screens side by side */
.case-figure--mobile-pair {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.5rem, 4vw, 3rem);
  background: var(--paper-soft);
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 4px;
  max-height: 720px;
  overflow: hidden;
  position: relative;
  flex-wrap: wrap;
}
.case-figure--mobile-pair::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--paper-soft));
  pointer-events: none;
}
.case-figure--mobile-pair img {
  max-width: 220px;
  width: 100%;
  height: auto;
  box-shadow: var(--shadow);
  border-radius: 18px;
}

/* Two portrait screens side by side, both at native-ish size */
.case-figure--portrait-pair {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: var(--paper-soft);
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
  border-radius: 4px;
}
@media (min-width: 720px) {
  .case-figure--portrait-pair {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
  }
}
.case-figure--portrait-pair img {
  max-width: 360px;
  width: 100%;
  height: auto;
  box-shadow: var(--shadow);
  border-radius: 4px;
}

/* Hero-focused variant: clip below the fold to focus on the hero region */
.case-figure--hero-pair {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: var(--paper-soft);
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
  border-radius: 4px;
  position: relative;
  max-height: 700px;
  overflow: hidden;
}
@media (min-width: 720px) {
  .case-figure--hero-pair {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
  }
}
.case-figure--hero-pair img {
  max-width: 420px;
  width: 100%;
  height: auto;
  box-shadow: var(--shadow);
  border-radius: 4px;
}
.case-figure--hero-pair::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom, transparent, var(--paper-soft));
  pointer-events: none;
}

/* --- PULL QUOTE / METRIC --- */
.pull-quote {
  margin: clamp(3rem, 6vw, 5rem) 0;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.pull-quote__metric {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(3.5rem, 8vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin-bottom: 1rem;
}
.pull-quote__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--ink-soft);
  font-weight: 400;
  max-width: 40ch;
}

/* --- METRIC STRIP (stacked-3 numbers) --- */
.metric-strip {
  margin: clamp(3rem, 6vw, 5rem) 0;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 720px) {
  .metric-strip { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
  .metric-strip--2 { grid-template-columns: repeat(2, 1fr); }
}
.metric-strip__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.metric-strip__value {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.metric-strip__label {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

/* --- NEXT PROJECT --- */
.next-project {
  margin-top: var(--section);
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-top: 1px solid var(--rule);
}
.next-project__label {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.5rem;
}
.next-project__title {
  font-family: var(--font-serif);
  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);
}
.foot__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: end;
}
.foot__statement {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 22ch;
  color: var(--ink);
}
.foot__statement a { border-bottom: 1px solid var(--ink); }
.foot__statement a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.foot__statement em { color: var(--accent); font-style: italic; }
.foot__statement a:hover em { color: var(--accent); }
.foot__meta {
  font-size: 13px;
  color: var(--ink-faint);
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .foot__inner {
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
  }
  .foot__meta { justify-content: flex-end; }
}

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

.diagram {
  margin: clamp(3rem, 6vw, 5rem) 0;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.diagram--wide {
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
}
@media (min-width: 1100px) {
  .diagram--wide {
    margin-left: -120px;
    margin-right: -120px;
  }
}
.diagram__title {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.75rem;
  font-weight: 500;
}
.diagram__caption {
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 1.5rem;
  font-style: italic;
  font-family: var(--font-serif);
}

/* Funnel architecture — horizontal stages */
.funnel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 900px) {
  .funnel {
    flex-direction: row;
    gap: 0;
  }
  .funnel__stage {
    flex: 1;
  }
  .funnel__stage:first-child { flex: 0.7; }
  .funnel__stage:last-child { flex: 0.8; }
}
.funnel__stage {
  padding: 1.25rem 1rem;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  position: relative;
  background: var(--card);
}
@media (min-width: 720px) {
  .funnel__stage:first-child { border-left: none; }
  .funnel__stage:last-child {
    border-right: 1px solid var(--rule);
    background: var(--paper-warm);
  }
}
.funnel__stage--source { background: var(--paper-warm); }
.funnel__label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.625rem;
  font-weight: 500;
}
.funnel__title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}
.funnel__items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.funnel__items li {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
  padding: 0.25rem 0;
  line-height: 1.4;
}
.funnel__sub {
  margin-top: 0.875rem;
  padding-top: 0.625rem;
  border-top: 1px dashed var(--rule);
}
.funnel__subtitle {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.funnel__bottom {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
}
.funnel__bottom-label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.funnel__bottom-result {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--ink);
}
.funnel__bottom-result em { color: var(--accent); font-style: italic; }

/* Vorher / Nachher comparison */
.compare {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.compare::-webkit-scrollbar {
  height: 6px;
}
.compare::-webkit-scrollbar-track {
  background: transparent;
}
.compare::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 3px;
}
.compare__col {
  flex: 0 0 85%;
  min-width: 0;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .compare {
    overflow-x: visible;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    gap: 1.5rem;
  }
  .compare__col { flex: 1; }
}
.compare__col {
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--card);
}
.compare__col--after {
  border-color: var(--accent);
  background: var(--paper-warm);
}
.compare__head {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.compare__col--after .compare__head { color: var(--accent); }
.compare__title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.compare__steps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.compare__step {
  padding: 0.75rem 0.875rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.compare__col--after .compare__step { background: var(--card); }
.compare__step-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.compare__step-meta {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.35;
}
.compare__metric {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: italic;
  letter-spacing: -0.01em;
}
.compare__col--after .compare__metric {
  border-top-color: rgba(194, 65, 12, 0.25);
  color: var(--accent);
}
.compare__metric small {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.25rem;
}
.compare__col--after .compare__metric small { color: var(--accent); opacity: 0.75; }

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

.detail-crop {
  margin: clamp(2rem, 4vw, 3rem) 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 560px;
}
.detail-crop--center {
  margin-left: auto;
  margin-right: auto;
}
.detail-crop__label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.detail-crop__media {
  background: var(--paper-soft);
  border-radius: 4px;
  padding: 0;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.detail-crop__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}
.detail-crop__caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
  line-height: 1.5;
  max-width: 50ch;
}

/* =====================================================
   HYPOTHESIS BREAKDOWN — labelled change-cards
   For PEAX hero variant analysis: each design change as
   a hypothesis with a stated "why".
   ===================================================== */

.hypothesis-breakdown {
  margin: clamp(2.5rem, 5vw, 4rem) 0;
}
.hypothesis-breakdown__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.hypothesis-breakdown__eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.hypothesis-breakdown__lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 60ch;
  margin: 0;
}
.hypothesis-breakdown__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 720px) {
  .hypothesis-breakdown__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
.hypothesis-card {
  padding: 1.25rem 1.25rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.hypothesis-card__label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
.hypothesis-card__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  margin: 0;
  color: var(--ink);
  line-height: 1.35;
}
.hypothesis-card__body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.hypothesis-card--lead {
  background: var(--paper-warm);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--rule));
}
.hypothesis-card--lead .hypothesis-card__label { color: var(--accent); }

/* =====================================================
   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 */
.modal-card-frame {
  --hk-green: #2C8C3F;
  --hk-green-dim: #94C9A1;
  --hk-text: #1F1F1F;
  --hk-meta: #6B6B6B;
  --hk-divider: #E5E5E5;
  --hk-frame: #ffffff;

  position: relative;
  background: var(--paper-soft);
  border-radius: 6px;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  margin: clamp(1.5rem, 3vw, 2rem) 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.modal-card {
  position: relative;
  background: #ffffff;
  border-radius: 8px;
  width: 100%;
  max-width: 420px;
  padding: 2rem 2rem 1.75rem;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 8px 24px -4px rgba(0, 0, 0, 0.08),
    0 24px 60px -8px rgba(0, 0, 0, 0.12);
  font-family: var(--font-sans);
  color: #1F1F1F;
  z-index: 1;
}

.modal-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.625rem;
}
.modal-card__title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  color: #1F1F1F;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.modal-card__close {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #6B6B6B;
  margin-top: 4px;
}

.modal-card__intro {
  font-size: 13px;
  color: #2C8C3F;
  line-height: 1.55;
  margin: 0 0 1.5rem;
  font-style: italic;
}

.modal-card__divider {
  height: 1px;
  background: #E5E5E5;
  margin: 1.25rem 0;
}

.modal-card__field-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: #1F1F1F;
  margin: 0 0 0.5rem;
  letter-spacing: 0;
}

.modal-card__select,
.modal-card__input {
  width: 100%;
  height: 40px;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  padding: 0 0.875rem;
  font-family: var(--font-sans);
  font-size: 14px;
  color: #6B6B6B;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-card__action-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.875rem;
}

.modal-card__btn {
  background: #2C8C3F;
  color: #ffffff;
  border: 0;
  border-radius: 3px;
  padding: 0.625rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: default;
}
.modal-card__btn--ghost {
  background: #94C9A1;
}

/* Dark mode adjustment — soften the white card and warm the frame */
:root[data-theme="dark"] .modal-card-frame,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .modal-card-frame {
    background: var(--paper-pop);
  }
}
:root[data-theme="dark"] .modal-card-frame {
  background: var(--paper-pop);
}

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

.architecture__core {
  background: var(--paper-warm);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 1.5rem 1.75rem;
  text-align: center;
  position: relative;
  margin-bottom: 0;
}
.architecture__core > p {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.architecture__core-label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.architecture__core-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.architecture__core-meta {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.architecture__connector {
  height: 32px;
  position: relative;
  margin: 0;
}
.architecture__connector::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--rule);
}

.architecture__branches {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 720px) {
  .architecture__branches {
    flex-direction: row;
    gap: 0;
  }
  .architecture__branch {
    flex: 1;
    border-left: 1px solid var(--rule);
  }
  .architecture__branch:first-child { border-left: none; }
}
.architecture__branch {
  padding: 1.25rem 1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  text-align: center;
}
@media (min-width: 720px) {
  .architecture__branch {
    border-radius: 0;
    border-top: 1px solid var(--rule);
    border-right: none;
    border-bottom: none;
  }
  .architecture__branch:first-child { border-left: 1px solid var(--rule); border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-bottom: 1px solid var(--rule); }
  .architecture__branch:last-child { border-right: 1px solid var(--rule); border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom: 1px solid var(--rule); }
  .architecture__branch:not(:first-child):not(:last-child) { border-bottom: 1px solid var(--rule); }
}
.architecture__branch--more {
  background: var(--paper-warm);
}
.architecture__branch-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.architecture__branch-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.architecture__branch-items li {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.architecture__caption {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.architecture__caption em { color: var(--accent); font-style: italic; }

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

.sitemap-v2 {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sitemap-v2__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .sitemap-v2__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}
.sitemap-v2__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--ink);
  margin: 0;
}
.sitemap-v2__title-meta {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.25rem;
  font-weight: 500;
}

/* The 5-swatch legend */
.sitemap-v2__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}
.sitemap-v2__legend--bottom {
  justify-content: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  gap: 0.5rem 1.5rem;
}
.sitemap-v2__legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.sitemap-v2__legend-swatch {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid transparent;
}
.sitemap-v2__legend-swatch--nav { background: var(--cat-nav); }
.sitemap-v2__legend-swatch--main { background: var(--cat-main); }
.sitemap-v2__legend-swatch--sub { background: var(--cat-sub); }
.sitemap-v2__legend-swatch--floating {
  background: transparent;
  border: 1px solid var(--ink);
}
.sitemap-v2__legend-swatch--social { background: var(--cat-social); }

/* Home node — central, teal */
.sitemap-v2__home-row {
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.sitemap-v2__home {
  background: var(--cat-nav);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 0.55rem 2rem;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

/* Floating row — Hinweis Cookies + Support, dashed connectors */
.sitemap-v2__floating-row {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
  position: relative;
}
.sitemap-v2__floating-row::before {
  content: '';
  position: absolute;
  top: -0.75rem;
  left: 50%;
  width: 1px;
  height: 0.75rem;
  background: var(--rule);
}
.sitemap-v2__floating {
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  padding: 0.4rem 0.875rem;
  border-radius: 3px;
  color: var(--ink);
  position: relative;
}
.sitemap-v2__floating-connector {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--ink-faint);
  font-size: 14px;
  letter-spacing: 0.5em;
}

/* Vertical trunk down from Home to branches */
.sitemap-v2__trunk {
  height: 24px;
  position: relative;
}
.sitemap-v2__trunk::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--rule);
}

/* The branches grid */
.sitemap-v2__branches {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  position: relative;
  padding-top: 12px;
}
.sitemap-v2__branches::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: var(--rule);
  display: none;
}
@media (min-width: 720px) {
  .sitemap-v2__branches {
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
  }
  .sitemap-v2__branches::before { display: block; }
}

/* Each branch column */
.sitemap-v2__branch {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  padding-top: 12px;
}
.sitemap-v2__branch::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 12px;
  background: var(--rule);
}
.sitemap-v2__branch-head {
  background: var(--cat-nav);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 0.5rem 0.5rem;
  border-radius: 3px;
  text-align: center;
  letter-spacing: 0.02em;
}
.sitemap-v2__branch-head--main {
  background: var(--cat-main);
  color: var(--ink);
}
.sitemap-v2__branch-head--depri {
  background: var(--cat-nav);
  color: #fff;
  opacity: 0.4;
}
/* Subnav header within a branch (gray label like "Digitaler Briefkasten") */
.sitemap-v2__subhead {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 0.5rem 0.5rem 0.25rem;
  letter-spacing: 0.02em;
  margin-top: 0.25rem;
}
.sitemap-v2__subhead--depri { opacity: 0.4; }

/* Leaf node */
.sitemap-v2__node {
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink);
  padding: 0.4rem 0.5rem;
  border-radius: 3px;
  text-align: center;
}
.sitemap-v2__node--main {
  background: var(--cat-main);
  border-color: var(--cat-main);
  color: var(--ink);
  font-weight: 500;
}
.sitemap-v2__node--social {
  background: var(--cat-social);
  border-color: var(--cat-social);
  color: var(--ink);
  font-weight: 500;
}
.sitemap-v2__node--depri { opacity: 0.4; }

/* Bottom callouts */
.sitemap-v2__callouts {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 720px) {
  .sitemap-v2__callouts { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.sitemap-v2__callout {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.sitemap-v2__callout-pill {
  flex-shrink: 0;
}
.sitemap-v2__callout-pill-main {
  display: inline-block;
  background: var(--cat-main);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  padding: 0.4rem 0.875rem;
  border-radius: 3px;
}
.sitemap-v2__callout-pill-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-top: 0.25rem;
  text-align: center;
  text-transform: uppercase;
}
.sitemap-v2__callout-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}

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

.exploration {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 720px) {
  .exploration { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}
.exploration__card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.exploration__index {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.exploration__name {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--ink);
  line-height: 1.15;
}
.exploration__viz {
  height: 60px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0.5rem 0;
}
.exploration__bar {
  flex: 1;
  background: var(--rule);
  border-radius: 2px;
}
.exploration__bar--accent { background: var(--accent); }
.exploration__bar--ink { background: var(--ink); }
.exploration__hyp {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-top: auto;
}
.exploration__footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
  text-align: center;
}

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

.dual {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dual__perspectives {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .dual__perspectives { grid-template-columns: 1fr 1fr; }
}
.dual__view {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.dual__view-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.dual__view-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--ink);
}
.dual__view-question {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-faint);
  line-height: 1.4;
  border-bottom: 1px dashed var(--rule);
  padding-bottom: 0.875rem;
}

/* Mini visualisation of the layout */
.dual__layout {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 120px;
}
.dual__layout--athlete {
  flex-direction: column;
}
.dual__layout--coach {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}
.dual__row {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  height: 16px;
}
.dual__row--accent {
  background: var(--paper-pop);
  border-color: rgba(194, 65, 12, 0.25);
}
.dual__cell {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.4rem 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 60px;
}
.dual__cell-row {
  background: var(--rule);
  height: 4px;
  border-radius: 1px;
}
.dual__cell-row--w50 { width: 50%; }
.dual__cell-row--w75 { width: 75%; }
.dual__cell-row--accent { background: var(--accent); width: 30%; height: 5px; }

.dual__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.dual__items li {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Connector showing they share a common foundation */
.dual__bridge {
  display: flex;
  justify-content: center;
  margin: 1rem 0 0;
  position: relative;
}
.dual__bridge::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 25%;
  width: 1px;
  height: 16px;
  background: var(--rule);
}
.dual__bridge::after {
  content: '';
  position: absolute;
  top: -16px;
  right: 25%;
  width: 1px;
  height: 16px;
  background: var(--rule);
}

.dual__shared {
  flex: 1;
  background: var(--paper-warm);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  text-align: center;
  position: relative;
}
.dual__shared::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  width: 50%;
  height: 1px;
  background: var(--rule);
  transform: translateX(-50%);
}
.dual__shared-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.dual__shared-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.dual__shared > p {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.dual__shared-meta {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* =====================================================
   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-serif and --font-sans now point to Inter */
body, h1, h2, h3, h4, h5, h6, p, a, button, input, textarea, select,
.display, .case-section h2, .case-hero__title, .case-hero__lede,
.work-index__title, .project__title, .project__excerpt,
.hero__headline, .hero__sub, .about-strip__body, .pull-quote__metric,
.pull-quote__label, .next-project__title, .foot__statement,
.metric-strip__value, .case-figure__caption, .compare__title,
.diagram__title, .diagram__caption, .funnel__title, .architecture__core-title,
.exploration__name, .dual__view-title, .dual__shared-title,
.hypothesis-card__title, .hypothesis-breakdown__lead,
.detail-crop__caption, .modal-card__title,
.more-work__title, .more-work__name, .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" */
.hero__headline em {
  color: var(--accent) !important;
  font-weight: 600 !important;
  font-style: normal !important;
}

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

.case-hero__title, .work-index__title, .next-project__title,
.about-strip__body, .more-work__title {
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}

.case-section h2, .project__title, .more-work__name,
.hypothesis-card__title, .modal-card__title,
.diagram__title, .compare__title, .funnel__title {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Pull quotes — drop the big italic editorial moment, make them tighter */
.pull-quote {
  background: var(--paper-soft) !important;
  border: 0.5px solid var(--rule) !important;
  border-radius: 8px !important;
  padding: 1.5rem 2rem !important;
}
.pull-quote__metric {
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--accent) !important;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.pull-quote__label {
  font-style: normal !important;
  font-weight: 400 !important;
  color: var(--ink-soft) !important;
}

/* Metric strip — indigo replaces orange for big numbers, tabular figures */
.metric-strip {
  border-top: 0.5px solid var(--rule) !important;
  border-bottom: 0.5px solid var(--rule) !important;
}
.metric-strip__value {
  font-weight: 600 !important;
  color: var(--accent) !important;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-style: normal !important;
}
.metric-strip__label {
  font-weight: 400 !important;
  color: var(--ink-faint) !important;
  font-style: normal !important;
}

/* Pills — outline style, indigo, mode-aware */
.project__cta, .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 */
.case-figure--portrait,
.case-figure--portrait-wide,
.case-figure--constrained,
.case-figure--mobile,
.modal-card-frame,
.detail-crop {
  background: var(--paper-soft) !important;
  border: 0.5px solid var(--rule) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* Image inside the framed figures — softer shadow, lighter rounding */
.case-figure--portrait img,
.case-figure--portrait-wide img,
.case-figure--constrained img,
.case-figure--mobile img {
  box-shadow: var(--shadow) !important;
  border-radius: 4px !important;
}

/* Hypothesis cards — match new system */
.hypothesis-breakdown__eyebrow {
  color: var(--accent) !important;
  font-weight: 500 !important;
}
.hypothesis-breakdown__lead {
  font-style: normal !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
}
.hypothesis-card {
  background: var(--card) !important;
  border: 0.5px solid var(--rule) !important;
  border-radius: 8px !important;
}
.hypothesis-card--lead {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}
.hypothesis-card__label {
  color: var(--ink-faint) !important;
  font-weight: 500 !important;
}
.hypothesis-card--lead .hypothesis-card__label {
  color: var(--accent) !important;
}
.hypothesis-card__title {
  font-style: normal !important;
  color: var(--ink) !important;
}
.hypothesis-card__body {
  color: var(--ink-soft) !important;
}

/* Architecture / funnel / sitemap diagrams — desaturate to match */
.architecture__core,
.funnel__stage,
.sitemap-v2 {
  border-color: var(--rule) !important;
}
.architecture__core-label,
.funnel__label,
.exploration__index {
  color: var(--accent) !important;
}
.architecture__caption em,
.funnel__bottom-result em {
  color: var(--accent) !important;
  font-style: normal !important;
}

/* Compare diagram (Finanzcheck before/after) */
.compare__col--after {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}
.compare__head {
  color: var(--ink-faint) !important;
}
.compare__col--after .compare__head {
  color: var(--accent) !important;
}
.compare__metric {
  color: var(--accent) !important;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Sitemap v2 callout pills */
.sitemap-v2__callout-pill {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}
.sitemap-v2__callout-pill-main {
  color: var(--accent) !important;
}

/* Modal card frame (Heineken templating) — drop peach tint */
.modal-card-frame {
  background: var(--paper-soft) !important;
}

/* Reference quotes — drop italic, use weight + neutral color */
.case-section p[style*="font-style:italic"],
.case-section p[style*="font-style: italic"] {
  font-style: normal !important;
}

/* Detail crops (Heineken Order Review) */
.detail-crop__label {
  color: var(--accent) !important;
  font-weight: 500 !important;
}

/* Nav — restrained */
.nav__link:hover { color: var(--accent) !important; }
.nav__theme-toggle:hover { color: var(--accent) !important; border-color: var(--accent) !important; }
.nav__lang-toggle:hover { color: var(--accent) !important; border-color: var(--accent) !important; }

/* Hero meta link */
.hero__meta a:hover {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

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

/* Project cards on home — tag pills */
.project__meta span {
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  font-weight: 400 !important;
  color: var(--ink-faint) !important;
  padding: 4px 10px !important;
  border: 0.5px solid var(--rule) !important;
  border-radius: 999px !important;
  background: transparent !important;
}

/* "Read the case study" CTA — small indigo link with arrow */
.project__cta {
  font-size: 13px !important;
  text-decoration: none !important;
  color: var(--accent) !important;
  font-weight: 500 !important;
}
.project__cta:hover { text-decoration: underline !important; }

/* More-work cards — match new system */
.more-work__card {
  background: var(--card) !important;
  border: 0.5px solid var(--rule) !important;
  border-radius: 8px !important;
}
.more-work__card:hover {
  border-color: var(--accent) !important;
}
.more-work__cta {
  color: var(--accent) !important;
}

/* Footer — drop the big italic emphasis */
.foot__statement em {
  color: var(--accent) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* "Available now" status pill — only on home hero */
.hero__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--status-green-soft);
  color: var(--status-green);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 1.5rem;
}
.hero__status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-green);
}

/* 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;
}
.hero__headline {
  font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
  max-width: 22ch;
}
.hero__sub {
  font-size: 15px !important;
  line-height: 1.6 !important;
  max-width: 60ch;
  color: var(--ink-soft) !important;
}
.case-hero__title {
  font-size: clamp(1.875rem, 4vw, 3rem) !important;
  line-height: 1.12 !important;
  max-width: 22ch;
}
.work-index__title, .more-work__title, .next-project__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  line-height: 1.18 !important;
}
.project__title {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem) !important;
  line-height: 1.25 !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 rebuild — HTML/CSS recreation of
   Heineken saved order template cards with action overlay
   ===================================================== */
.product-lists-rebuild {
  background: var(--paper-soft);
  border-radius: 8px;
  padding: clamp(1.75rem, 4vw, 3rem);
  margin: clamp(1.5rem, 3vw, 2rem) 0;
}
.product-lists-rebuild__eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin: 0 0 1.5rem;
}
.product-lists-rebuild__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
@media (max-width: 800px) {
  .product-lists-rebuild__grid {
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }
}
.product-lists-rebuild__caption {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 60ch;
  margin: 0;
}

/* Individual card */
.pl-card {
  background: var(--card);
  border: 0.5px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  transition: border-color 0.2s ease;
}
.pl-card:hover { border-color: var(--accent); }

.pl-card__thumb {
  height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 14px;
  position: relative;
  background: linear-gradient(135deg, #2D3F69 0%, #1F2D4D 100%);
  color: rgba(255, 255, 255, 0.92);
}
.pl-card__thumb--restock {
  background: linear-gradient(135deg, #4A6B8A 0%, #2D3F69 100%);
}
.pl-card__thumb--christmas {
  background: linear-gradient(135deg, #6B2D2D 0%, #4A1F1F 100%);
}
.pl-card__thumb--soccer {
  background: linear-gradient(135deg, #2D6B4A 0%, #1F4A33 100%);
}
.pl-card__date,
.pl-card__count {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: rgba(255, 255, 255, 0.85);
}
.pl-card__count { align-self: flex-end; font-weight: 500; }

.pl-card__body {
  padding: 14px 16px 18px;
}
.pl-card__name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.3;
}
.pl-card__sub {
  font-size: 12px;
  color: var(--ink-faint);
  margin: 0;
  line-height: 1.4;
}

/* Action overlay — visible on hover, except featured card which shows by default */
.pl-card__actions {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.96);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  padding: 1rem 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
:root[data-theme="dark"] .pl-card__actions,
:root:not([data-theme="light"]) .pl-card__actions {
  background: rgba(20, 20, 20, 0.96);
}
.pl-card:hover .pl-card__actions,
.pl-card__actions--visible {
  opacity: 1;
  pointer-events: auto;
}
.pl-card__action {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 14px;
  background: transparent;
  border: 0.5px solid var(--rule);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.pl-card__action:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pl-card__action--danger {
  color: #B33A3A;
  border-color: rgba(179, 58, 58, 0.30);
}
.pl-card__action--danger:hover {
  background: rgba(179, 58, 58, 0.06);
  color: #B33A3A;
  border-color: #B33A3A;
}
:root[data-theme="dark"] .pl-card__action--danger,
:root:not([data-theme="light"]) .pl-card__action--danger {
  color: #E37070;
  border-color: rgba(227, 112, 112, 0.30);
}

/* Featured card subtle marker */
.pl-card--featured {
  border-color: var(--accent);
}

/* Brand mark — Hichem / Cherif stacked, italic + bold, smaller */
.nav__logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  text-decoration: none;
  color: var(--ink) !important;
  font-family: var(--font-sans);
}
.nav__logo-line {
  font-size: 13px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.01em;
  display: block;
  line-height: 1.05;
}
.nav__logo:hover { color: var(--accent) !important; }
.nav__logo:hover .nav__logo-line { color: var(--accent) !important; }

/* Brand mark italic — boost specificity to win the cascade */
a.nav__logo .nav__logo-line,
.nav__logo .nav__logo-line {
  font-style: italic !important;
  font-weight: 700 !important;
}

/* 2-column variant for the actions block */
.product-lists-rebuild__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 720px;
}
@media (max-width: 720px) {
  .product-lists-rebuild__grid--2 {
    grid-template-columns: 1fr;
  }
}

/* Context-menu version of the card — menu floats over the bottom-right of the card */
.pl-card__menu {
  position: absolute;
  top: 110px;
  right: 12px;
  background: var(--card);
  border: 0.5px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 8px 24px -6px rgba(10, 10, 10, 0.15), 0 2px 6px rgba(10, 10, 10, 0.06);
  padding: 4px;
  display: flex;
  flex-direction: column;
  min-width: 140px;
  z-index: 2;
}
:root[data-theme="dark"] .pl-card__menu,
:root:not([data-theme="light"]) .pl-card__menu {
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.pl-card__menu-item {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pl-card__menu-item:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.pl-card__menu-item--danger {
  color: #B33A3A;
}
.pl-card__menu-item--danger:hover {
  background: rgba(179, 58, 58, 0.08);
  color: #B33A3A;
}
:root[data-theme="dark"] .pl-card__menu-item--danger,
:root:not([data-theme="light"]) .pl-card__menu-item--danger {
  color: #E37070;
}

/* When card has menu open, give it some breathing room */
.product-lists-rebuild--actions {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.pl-card--menu-open {
  border-color: var(--accent);
}

/* Body emphasis in caption */
.product-lists-rebuild__caption em {
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
}

/* Fix: when menu is open, the card needs room below to show all 4 items */
.product-lists-rebuild--actions .pl-card--menu-open {
  margin-bottom: 110px;
  overflow: visible;
}
.product-lists-rebuild--actions .product-lists-rebuild__grid {
  align-items: start;
}
.pl-card--menu-open {
  overflow: visible !important;
}

/* =====================================================
   Product Lists — faithful 1:1 rebuild of Heineken UI
   Sharp corners, real beer photography, green selection,
   dimmed-card-with-context-menu pattern.
   ===================================================== */
.pl-faithful {
  background: #ffffff;
  border-radius: 8px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin: clamp(1.5rem, 3vw, 2rem) 0;
  border: 0.5px solid var(--rule);
}
:root[data-theme="dark"] .pl-faithful,
:root:not([data-theme="light"]) .pl-faithful {
  background: var(--paper-soft);
}
.pl-faithful__title {
  font-size: 18px;
  font-weight: 400;
  color: #2A2A2A;
  margin: 0 0 1.25rem;
  letter-spacing: -0.005em;
  font-family: 'Inter', system-ui, sans-serif;
}
:root[data-theme="dark"] .pl-faithful__title,
:root:not([data-theme="light"]) .pl-faithful__title {
  color: var(--ink-soft);
}
.pl-faithful__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 800px) {
  .pl-faithful__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .pl-faithful__grid { grid-template-columns: 1fr; }
}
.pl-faithful__caption {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 60ch;
  margin: 1.5rem 0 0;
  font-family: 'Inter', system-ui, sans-serif;
}
.pl-faithful__caption em {
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
}

/* Faithful card */
.plf-card {
  background: #ffffff;
  border: 1px solid #E5E5E5;
  border-radius: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 280px;
  overflow: visible;
  font-family: 'Inter', system-ui, sans-serif;
}
:root[data-theme="dark"] .plf-card,
:root:not([data-theme="light"]) .plf-card {
  background: #ffffff;
  border-color: #D8D8D8;
  color: #0A0A0A;
}
.plf-card--add {
  background: #F0F0EE;
  border: 1px solid transparent;
  align-items: center;
  justify-content: center;
}
.plf-card__plus {
  font-size: 60px;
  color: #2C8C3F;
  font-weight: 200;
  line-height: 1;
  user-select: none;
}
.plf-card--selected {
  border: 2px solid #2C8C3F;
}
.plf-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  font-size: 11px;
  color: #6B6B6B;
  gap: 6px;
}
.plf-card__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin-right: auto;
}
.plf-card__bars i {
  display: block;
  width: 14px; height: 2px;
  background: #6B6B6B;
}
.plf-card__date {
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: #6B6B6B;
}
.plf-card__count {
  font-weight: 700;
  color: #0A0A0A;
  font-size: 11px;
}
.plf-card__media {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  min-height: 0;
}
.plf-card__media img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.plf-card__body {
  padding: 0 12px 8px;
  margin-bottom: 28px;
}
.plf-card__name {
  font-size: 13px;
  font-weight: 700;
  color: #0A0A0A;
  margin: 0 0 2px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  font-family: 'Inter', system-ui, sans-serif;
}
.plf-card__sub {
  font-size: 11px;
  color: #888;
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
}
.plf-card__view {
  display: inline-block;
  background: #2C8C3F;
  color: #ffffff;
  font-size: 13px;
  font-weight: 400;
  padding: 5px 16px;
  border-radius: 0;
  position: absolute;
  bottom: 8px;
  right: 8px;
  letter-spacing: 0.02em;
}

/* Context menu state — dim the card */
.plf-card--menu-open .plf-card__top,
.plf-card--menu-open .plf-card__media,
.plf-card--menu-open .plf-card__body,
.plf-card--menu-open .plf-card__view {
  opacity: 0.15;
}
.plf-card--menu-open {
  border-color: #C5A04D;
  border-width: 1px;
}

/* The popover menu */
.plf-menu {
  position: absolute;
  top: 32px;
  left: 12px;
  right: 12px;
  background: #ffffff;
  border: 1px solid #E5E5E5;
  border-radius: 0;
  padding: 14px 14px;
  box-shadow: 0 2px 8px rgba(10, 10, 10, 0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 5;
}
.plf-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #2A2A2A;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
}
.plf-menu__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.plf-menu__icon--rename {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #2C8C3F;
  font-style: italic;
  letter-spacing: -0.04em;
}

/* ==== Faithful Product Lists — corrections to match screenshot ==== */

/* Selected state — bold bright green border */
.plf-card.plf-card--selected {
  border: 2px solid #2C8C3F !important;
  outline: 1px solid #2C8C3F;
  outline-offset: 0;
}

/* Lighten the hamburger icons */
.plf-card__bars i {
  background: #B8B8B8 !important;
  height: 1.5px !important;
}

/* View button — flat green rectangle, anchored bottom-right */
.plf-card__view {
  background: #2C8C3F !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 8px 24px !important;
  border-radius: 0 !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  letter-spacing: 0.02em !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  line-height: 1 !important;
}

/* Equalize card heights — set min-height instead of fixed */
.plf-card {
  min-height: 280px;
  height: auto !important;
}

/* Item count alignment */
.plf-card__top {
  padding: 10px 12px !important;
}
.plf-card__date {
  flex: 1;
  text-align: left;
  padding-left: 8px;
}
.plf-card__count {
  text-align: right;
  white-space: nowrap;
}

/* Add card + larger and centered */
.plf-card__plus {
  font-size: 80px !important;
  font-weight: 100 !important;
  color: #2C8C3F !important;
}

/* Selected card View button — slightly brighter green */
.plf-card--selected .plf-card__view {
  background: #2C8C3F !important;
}

/* Body should reserve space for the View button at bottom */
.plf-card__body {
  padding: 8px 12px 36px !important;
  margin-bottom: 0 !important;
}

/* Card name styling — bold but not too heavy */
.plf-card__name {
  font-weight: 700 !important;
  color: #1A1A1A !important;
}

/* Last modified — smaller, lighter */
.plf-card__sub {
  color: #999 !important;
}

/* Grid spacing tightening */
.pl-faithful__grid {
  gap: 12px !important;
}

/* Menu open card — keep its content visible underneath the menu but very faint */
.plf-card--menu-open .plf-card__top,
.plf-card--menu-open .plf-card__media,
.plf-card--menu-open .plf-card__body {
  opacity: 0.18 !important;
}
.plf-card--menu-open .plf-card__view {
  opacity: 0.4 !important;
  background: #99B89F !important;
}

/* Menu popover — wider and slight shadow */
.plf-menu {
  top: 38px !important;
  left: 6px !important;
  right: 6px !important;
  padding: 16px 18px !important;
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.05), 0 4px 12px rgba(10, 10, 10, 0.06) !important;
  background: #ffffff !important;
  gap: 16px !important;
}

/* Rename glyph A| more carefully */
.plf-menu__icon--rename {
  font-style: italic !important;
  font-weight: 400 !important;
  color: #2C8C3F !important;
  font-size: 16px !important;
  letter-spacing: -0.05em !important;
}

/* Faithful product-lists with only 3 cards — adjust grid to 3 columns max */
.pl-faithful__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 720px;
}
@media (max-width: 700px) {
  .pl-faithful__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 480px) {
  .pl-faithful__grid {
    grid-template-columns: 1fr !important;
  }
}

/* CORRECTION: menu is a full-card overlay, not a popover */

/* Override previous popover styling — make menu fill the card */
.plf-card--menu-open .plf-menu {
  position: absolute !important;
  top: 36px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  padding: 12px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 14px !important;
  z-index: 5 !important;
}

/* Menu-open card: the whole card gets a thin yellow-green outline */
.plf-card.plf-card--menu-open {
  border: 1px solid #C5D670 !important;
  outline: none !important;
}

/* Hamburger turns green when menu is open */
.plf-card--menu-open .plf-card__bars i {
  background: #2C8C3F !important;
  height: 2px !important;
  width: 16px !important;
}

/* The card body / media stay faintly visible BEHIND the menu */
.plf-card--menu-open .plf-card__top {
  opacity: 1 !important;
  position: relative;
  z-index: 6;
  background: #ffffff;
}
.plf-card--menu-open .plf-card__media,
.plf-card--menu-open .plf-card__body {
  opacity: 0 !important;
}

/* Hide View on menu-open card */
.plf-card--menu-open .plf-card__view {
  opacity: 0 !important;
}

/* Reverse the opacity:0 — make body and media faintly visible behind menu */
.plf-card--menu-open .plf-card__media,
.plf-card--menu-open .plf-card__body {
  opacity: 0.18 !important;
  position: relative;
  z-index: 4;
}
/* Menu sits over the card with white background to occlude the beer image */
.plf-card--menu-open .plf-menu {
  background: rgba(255, 255, 255, 0.94) !important;
}

/* MORE FAITHFUL: default menu items grey, only hovered is green */

/* Default menu item — text dark, icon grey */
.plf-menu__item {
  color: #2A2A2A !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}
.plf-menu__item .plf-menu__icon {
  color: #999 !important; /* SVG strokes inherit from this via currentColor */
}

/* Hovered item — text and icon both green */
.plf-menu__item--hovered {
  color: #2C8C3F !important;
}
.plf-menu__item--hovered .plf-menu__icon {
  color: #2C8C3F !important;
}

/* Rename A| glyph — also grey by default unless hovered */
.plf-menu__icon--rename {
  color: #999 !important;
}
.plf-menu__item--hovered .plf-menu__icon--rename {
  color: #2C8C3F !important;
}

/* Hamburger when menu open — proper Heineken green, solid bars */
.plf-card--menu-open .plf-card__bars i {
  background: #2C8C3F !important;
  height: 2px !important;
  width: 16px !important;
}

/* Date and count when menu open — fade to ~15% */
.plf-card--menu-open .plf-card__top {
  opacity: 1 !important;
  background: transparent !important;
}
.plf-card--menu-open .plf-card__date,
.plf-card--menu-open .plf-card__count {
  opacity: 0.18 !important;
}
/* But hamburger stays full opacity green */
.plf-card--menu-open .plf-card__bars {
  opacity: 1 !important;
}

/* View button when menu open — very faded */
.plf-card--menu-open .plf-card__view {
  opacity: 0.12 !important;
  background: #2C8C3F !important;
}

/* Menu fills the card — make sure it doesn't have white background blocking view of body content */
.plf-card--menu-open .plf-menu {
  background: transparent !important;
}

/* Card body and media show through faintly behind menu */
.plf-card--menu-open .plf-card__media,
.plf-card--menu-open .plf-card__body {
  opacity: 0.18 !important;
}

/* Menu items — wider vertical spacing to match the screenshot, centered better */
.plf-card--menu-open .plf-menu {
  padding: 24px 28px !important;
  gap: 22px !important;
  justify-content: flex-start !important;
  padding-top: 32px !important;
}

/* Final fix: hide body content on menu-open card to prevent overlap with menu items */
.plf-card--menu-open .plf-card__body {
  visibility: hidden !important;
}
/* Also keep media area present (faded beer image is OK) but body text gone */

/* =====================================================
   Product Lists — three real screenshot crops
   Native size, horizontal row, scroll on narrow screens
   ===================================================== */
.pl-cards {
  margin: clamp(1.5rem, 3vw, 2rem) 0;
}
.pl-cards__eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin: 0 0 1.25rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.pl-cards__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  overflow-x: auto;
  padding: 4px 4px 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.pl-cards__item {
  margin: 0;
  flex: 0 0 auto;
  background: transparent;
}
.pl-cards__item img {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  /* Native size of the @3x crops: 207-230 wide, 300 tall */
}
.pl-cards__caption {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 60ch;
  margin: 1rem 0 0;
  font-family: 'Inter', system-ui, sans-serif;
}
@media (max-width: 700px) {
  .pl-cards__row {
    /* On mobile, row scrolls horizontally with native sizes */
    padding-right: 1rem;
  }
}

/* Cards displayed at fixed width — proper sizing for the proper exports */
.pl-cards__item img {
  width: 220px !important;
  height: auto !important;
}

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

/* 2. Hero credential pills — small, restrained, sit alongside Available now */
.hero__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.5rem;
  align-items: center;
}
.hero__credential {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--accent-soft);
  color: var(--accent);
  border: 0.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-family: 'Inter', system-ui, sans-serif;
}
.hero__credential__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
/* Make credential row sit on the same line as the status pill */
.hero__pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.5rem;
  align-items: center;
}
.hero__pill-row .hero__status {
  margin-bottom: 0 !important;
}

/* 3. Cards alignment — pin to top, equal heights via stretch */
.pl-cards__row {
  align-items: stretch !important;
}
.pl-cards__item {
  display: flex !important;
  align-items: flex-start !important;
}
.pl-cards__item img {
  align-self: flex-start;
}

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

/* 2. Hero — drop the green status pill from above credentials.
   Hide the legacy .hero__status if it lingers. */
.hero__pill-row .hero__status { display: none !important; }

/* Hero CTA stack — Available + Let's talk shop, both centered to each other */
.hero__cta-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5rem;
}

/* Currently available — plain text + green dot, no pill */
.hero__availability {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 0.625rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--status-green);
  font-family: 'Inter', system-ui, sans-serif;
  text-align: center;
}
.hero__availability__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-green);
  flex-shrink: 0;
}

/* CTA — plain link, no pill */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding-bottom: 2px;
  font-family: 'Inter', system-ui, sans-serif;
  transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
  width: fit-content;
}
.hero__cta:hover {
  border-color: var(--accent);
  gap: 10px;
}

/* 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;
}
.foot__theme-toggle,
.foot__lang-toggle {
  background: transparent;
  border: 0.5px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.foot__theme-toggle { padding: 6px; }
.foot__theme-toggle svg { width: 14px; height: 14px; }
.foot__theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .foot__theme-toggle .icon-moon,
:root:not([data-theme="light"]) .foot__theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .foot__theme-toggle .icon-sun,
:root:not([data-theme="light"]) .foot__theme-toggle .icon-sun { display: inline; }
.foot__theme-toggle:hover,
.foot__lang-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.foot__lang-toggle__divider {
  opacity: 0.4;
}

/* 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 */
.nav__hamburger {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.nav__hamburger:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.nav__hamburger__bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
  align-items: stretch;
}
.nav__hamburger__bar {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.25s ease;
}

/* 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__hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .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. */
@media (max-width: 720px) {
  .nav .nav__theme-toggle,
  .nav .nav__lang-toggle {
    display: none !important;
  }
  .nav__hamburger {
    display: inline-flex !important;
  }
}

/* Fix: foot theme toggle — explicit moon visibility in light mode */
.foot__theme-toggle .icon-moon { display: block !important; }
.foot__theme-toggle .icon-sun { display: none !important; }
:root[data-theme="dark"] .foot__theme-toggle .icon-moon { display: none !important; }
:root[data-theme="dark"] .foot__theme-toggle .icon-sun { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .foot__theme-toggle .icon-moon { display: none !important; }
  :root:not([data-theme="light"]) .foot__theme-toggle .icon-sun { display: block !important; }
}

/* === 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" */
.hero__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: -0.005em;
  padding-right: 2px;
  transition: color 0.2s ease;
}
.hero__cta span[aria-hidden] {
  display: inline-block;
  margin-left: 0;
  width: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease, margin-left 0.25s ease, width 0.25s ease;
  overflow: hidden;
}
.hero__cta:hover span[aria-hidden] {
  opacity: 1;
  width: 1.2em;
  transform: translateX(0);
  margin-left: 6px;
}
.hero__cta:hover {
  color: var(--accent);
}

/* 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__controls .foot__theme-toggle,
  .foot__controls .foot__lang-toggle {
    display: none !important;
  }
  .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 .foot__theme-toggle,
.foot__controls .foot__lang-toggle {
  display: none !important;
}
.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 */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.hero__cta:hover {
  background: color-mix(in srgb, var(--ink) 88%, var(--accent));
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.12);
  color: var(--paper) !important;
}
/* Arrow always visible inside pill — overrides previous slide-on-hover rules */
.hero__cta span[aria-hidden] {
  display: inline-block !important;
  margin-left: 0 !important;
  width: auto !important;
  opacity: 1 !important;
  transform: none !important;
  overflow: visible !important;
  transition: transform 0.2s ease;
}
.hero__cta:hover span[aria-hidden] {
  transform: translateX(3px);
}

/* === 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. */
.metric-strip {
  border-top: none !important;
  border-bottom: none !important;
  margin: clamp(2rem, 4vw, 3rem) 0 !important;
  padding: 1.25rem 0 !important;
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 3rem) !important;
  grid-template-columns: none !important;
}
.metric-strip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.5px;
  background: var(--rule);
}
.metric-strip__item {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}
.metric-strip__value {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.metric-strip__label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ink-faint) !important;
  font-weight: 500 !important;
}
@media (min-width: 720px) {
  .metric-strip { grid-template-columns: none !important; }
}

/* === 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 */
.hero__cta {
  /* override previous always-visible arrow rules */
  position: relative;
  overflow: hidden;
}
.hero__cta span[aria-hidden] {
  display: inline-block !important;
  margin-left: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
  transform: translateX(-6px) !important;
  overflow: hidden !important;
  transition: opacity 0.25s ease, transform 0.25s ease, margin-left 0.25s ease, width 0.25s ease !important;
}
.hero__cta:hover span[aria-hidden],
.hero__cta:focus span[aria-hidden],
.hero__cta:active span[aria-hidden],
.hero__cta:focus-visible span[aria-hidden] {
  opacity: 1 !important;
  width: 1.2em !important;
  margin-left: 8px !important;
  transform: translateX(0) !important;
}

/* 5. Heart click animation — Mario-style +1 popup */
.foot__center {
  cursor: pointer;
  user-select: none;
  position: relative;
}
.foot__plus-one {
  position: absolute;
  pointer-events: none;
  font-family: 'Press Start 2P', 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #E11D48;
  text-shadow:
    1px 0 0 currentColor,
    0 1px 0 currentColor,
    -1px 0 0 currentColor,
    0 -1px 0 currentColor;
  /* Pixelated rendering feel */
  -webkit-font-smoothing: none;
  font-smoothing: none;
  z-index: 10;
  animation: plusOne 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@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 */
.project__link {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  border-radius: 12px;
  transition: background 0.18s ease;
  /* tap feedback for the actual page transition */
}
.project__link:hover {
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.project__link:hover .project__title {
  color: var(--accent);
}
.project__link:hover .project__cta {
  color: var(--accent);
}
/* Span CTA (now non-link) — keep visual link styling */
.project__cta {
  cursor: pointer;
}

/* 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. */
.pull-quote {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-top: 0.5px solid var(--rule) !important;
  padding: clamp(1.75rem, 3vw, 2.5rem) 0 !important;
  margin: clamp(2rem, 4vw, 3rem) 0 !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: clamp(1.5rem, 3vw, 2.5rem) !important;
  align-items: baseline !important;
}
.pull-quote__metric {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace !important;
  font-weight: 500 !important;
  font-size: clamp(2.25rem, 4vw, 3rem) !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  color: var(--accent) !important;
  margin: 0 !important;
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
}
.pull-quote__label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--ink-soft) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  margin: 0 !important;
  max-width: 50ch !important;
}
@media (max-width: 600px) {
  .pull-quote {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .pull-quote__metric {
    font-size: 2rem !important;
  }
}

/* Project rows: drop the hover background, keep title/CTA color highlight only */
.project__link:hover {
  background: transparent !important;
}
.project__link:hover .project__title {
  color: var(--accent);
}
.project__link:hover .project__cta {
  color: var(--accent);
}

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

/* 1. Pull-out opener — first sentence enlarged, sits alone before "How I work" */
.about-opener {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.25;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: clamp(1rem, 2.5vw, 2rem) 0 clamp(2.5rem, 5vw, 4rem);
  max-width: 28ch;
}
/* The first word/phrase emphasized via italic accent */
.about-opener::first-line {
  /* No-op — kept for typographic intent */
}

/* 2. Fact strip — credentials line, same visual register as the case-study metric strip */
.about-strip {
  border-top: 0.5px solid var(--rule);
  padding: 1.5rem 0;
  margin: clamp(2rem, 4vw, 3rem) 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: baseline;
}
.about-strip__item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  flex: 0 1 auto;
}
.about-strip__value {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.about-strip__label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

/* 3. Italic punchline — "That's the frame I work in" treated as the editorial close it earns */
.about-frame {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
  letter-spacing: -0.015em !important;
  margin: 1rem 0 0 !important;
  max-width: 32ch;
}

/* === 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 */
main.wrap--narrow .case-section p[style*="font-style:italic"] {
  font-size: 1.125rem !important;
}
/* Pull-out opener — italic guillemet quote, larger, sits alone */
.about-opener {
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  line-height: 1.3 !important;
  font-style: italic !important;
  color: var(--ink) !important;
  max-width: 32ch !important;
  margin: clamp(2rem, 4vw, 3.5rem) 0 !important;
}

/* About hero — force "grounded in data" / "die auf Daten basieren" to its own line on desktop+ */
@media (min-width: 720px) {
  .hero__break {
    display: block;
  }
}

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

/* Worked-with strip — monospace wordmarks, editorial restraint */
.about-companies {
  margin: clamp(2.5rem, 5vw, 4rem) 0;
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
}
.about-companies__eyebrow {
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink-faint) !important;
  font-weight: 500 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  margin: 0 0 1rem !important;
  max-width: none !important;
}
.about-companies__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
  align-items: baseline;
}
.about-companies__list li {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
@media (max-width: 600px) {
  .about-companies__list li {
    font-size: 13px;
  }
}

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

.thesis {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
}
.thesis__eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  margin: 0 0 2rem;
  padding-bottom: 1rem;
  border-bottom: 0.5px solid var(--rule);
}
.thesis__row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  padding: clamp(1.75rem, 3vw, 2rem) 0;
  border-bottom: 0.5px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.thesis__row:last-child {
  border-bottom: none;
}
.thesis__noun {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.thesis__noun em {
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
  font-family: inherit;
}
.thesis__body {
  max-width: 56ch;
}
.thesis__body p {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.thesis__evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  align-items: baseline;
  padding-top: 0.75rem;
  border-top: 0.5px solid color-mix(in srgb, var(--ink) 8%, transparent);
  margin-top: 0.25rem;
}
.thesis__metric {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.thesis__label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

/* Mobile: stack noun above body, smaller noun */
@media (max-width: 720px) {
  .thesis__row {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.5rem 0;
  }
  .thesis__noun {
    font-size: 1.75rem;
  }
}

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

.work-tease {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem);
}
.work-tease__inner {
  max-width: 56ch;
  border-top: 0.5px solid var(--rule);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.work-tease__eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  margin: 0 0 1rem;
}
.work-tease__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 1.5rem;
}
.work-tease__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.work-tease__cta:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.work-tease__cta span {
  transition: transform 0.2s ease;
}
.work-tease__cta:hover span {
  transform: translateX(3px);
}

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

.approach {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(1rem, 2vw, 2rem);
}
.approach__body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
  font-weight: 400;
}
.approach__body em {
  font-style: italic;
  color: var(--ink);
  font-weight: 500;
}

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

/* Work index lede sized to match home hero__sub (smaller than case-study ledes) */
.case-hero__lede--small {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.0625rem !important;
  line-height: 1.55 !important;
  color: var(--ink-soft) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  max-width: 56ch !important;
}

/* === 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-quote--de p {
  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) */
.cd-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; }
.cd-rule { stroke: var(--rule); stroke-width: 0.5; fill: none; }
.cd-axis { stroke: var(--ink-faint); stroke-width: 0.8; fill: none; }
.cd-mark { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.cd-mark-final { stroke: var(--accent); stroke-width: 2; fill: none; }
.cd-label { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; fill: var(--ink); }
.cd-label-soft { font-family: 'Inter', system-ui, sans-serif; font-size: 10px; fill: var(--ink-faint); }
.cd-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; fill: var(--ink-soft); }

/* 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 {
  display: inline-block;
  margin-bottom: 16px;
  color: #E11D48;
  text-decoration: none;
  line-height: 0;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.4s ease, transform 0.2s ease, color 0.2s ease;
}
.foot__easter-link svg {
  display: block;
  height: 14px;
  width: auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.foot__easter-link.is-shown {
  opacity: 1;
  transform: translateY(0);
}
.foot__easter-link:hover {
  color: #FF3D63;
  transform: translateY(-1px) scale(1.03);
  opacity: 1;
}
/* Visually hidden but readable by screen readers */
.foot__easter-link__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === 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) */
.ev-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; }
.ev-eyebrow.ev-winner { fill: var(--accent); }
.ev-rule { stroke: var(--rule); stroke-width: 0.5; fill: none; }
.ev-box-faint { fill: none; stroke: var(--ink-faint); stroke-width: 0.6; stroke-dasharray: 3 3; }
.ev-box-winner { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.ev-bar-faint { fill: var(--ink-faint); fill-opacity: 0.06; stroke: none; }
.ev-bar-winner { fill: var(--accent); fill-opacity: 0.10; stroke: none; }
.ev-line-faint { stroke: var(--ink-faint); stroke-width: 1; opacity: 0.5; }
.ev-line-winner { stroke: var(--ink); stroke-width: 1; }
.ev-label-faint { font-family: 'Inter', system-ui, sans-serif; font-size: 10px; fill: var(--ink-faint); }
.ev-label-winner { font-family: 'Inter', system-ui, sans-serif; font-size: 10px; fill: var(--accent); font-weight: 600; }
.ev-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; fill: var(--ink-soft); letter-spacing: 0.02em; }
.ev-mono-winner { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; fill: var(--accent); font-weight: 600; }

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

.project__media--diagram {
  background: var(--paper-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.project__media--diagram svg {
  width: 100%;
  height: 100%;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* 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-bar-faint { fill: var(--ink-faint); fill-opacity: 0.06; stroke: none; }
.thumb-bar-accent { fill: var(--accent); fill-opacity: 0.10; stroke: none; }
.thumb-bar-track { fill: var(--ink-faint); fill-opacity: 0.15; stroke: none; }
.thumb-bar-fill { fill: var(--accent); stroke: none; }
.thumb-line-faint { stroke: var(--ink-faint); stroke-width: 1; opacity: 0.5; }
.thumb-line-accent { stroke: var(--ink); stroke-width: 1; }
.thumb-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; fill: var(--ink-faint); letter-spacing: 0.04em; }
.thumb-mono-strong { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; fill: var(--ink); letter-spacing: 0.02em; font-weight: 600; }
.thumb-mono-accent { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; fill: var(--accent); letter-spacing: 0.04em; font-weight: 600; }
.thumb-cta { fill: var(--ink); stroke: none; }
.thumb-cta-text { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; fill: var(--paper); 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;
  }
  .hero__headline {
    font-size: clamp(2.625rem, 11vw, 4rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.035em !important;
    max-width: 14ch !important;
    margin-bottom: 1.75rem !important;
  }
  .hero__sub {
    font-size: 16px !important;
    line-height: 1.55 !important;
    max-width: 32ch !important;
    margin-bottom: 2rem !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 */
  .work-index__title, .more-work__title {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
  }
}

/* Even tighter on very narrow phones */
@media (max-width: 380px) {
  .hero__headline {
    font-size: clamp(2.25rem, 10vw, 3rem) !important;
    max-width: 12ch !important;
  }
  .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;
}
.foot__plusone {
  will-change: transform, opacity;
}
.reveal,
.scroll-fade {
  will-change: opacity, transform;
}
.reveal.is-revealed,
.scroll-fade.is-revealed {
  /* Stop hinting after the animation completes */
  will-change: auto;
}