/* ----------------------------------------------------------------
   Hichem Cherif, portfolio v2
   monochrome · layout-driven · functional product experience
---------------------------------------------------------------- */

/* tokens */
:root {
  --bg:        #F5EFE2;
  --ink:       #161613;
  --muted:    #6B6B66;
  --accent:   #5C5F66;
  --rule:     #E1DBCC;
  --hover:    #2A2A26;

  --max:      1440px;
  --pad:      clamp(20px, 4vw, 56px);
  --gap:      clamp(24px, 4vw, 48px);

  --font:     "Inter", system-ui, -apple-system, BlinkMacSystemFont,
              "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "EB Garamond", "Source Serif Pro", Georgia, "Times New Roman", serif;

  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  --t-fast:   180ms;
  --t-base:   320ms;
  --t-slow:   600ms;
}

/* reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Coordinated dark-mode transition when mobile menu opens. Paired with
     a JS theme-color swap so iOS Safari's chrome dark-transitions at the
     same time. Eases the cream→dark over the menu's curtain animation. */
  transition: background-color 0.6s ease;
}
body.menu-open {
  background: var(--ink);
}
/* Hide everything beneath the menu so light-colored page text doesn't
   leak through the dark body bg in the area Safari refuses to let the
   menu cover (behind status bar / URL bar). Menu itself stays visible. */
body.menu-open > *:not(.menu) {
  visibility: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--bg); }

/* layout shell */
.shell {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ----------------------------------------------------------------
   navigation
---------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  margin-top: 0;
  border-radius: 0;
  box-shadow: 0 0 0 transparent;
  transition:
    background var(--t-base) var(--ease),
    backdrop-filter var(--t-base) var(--ease),
    -webkit-backdrop-filter var(--t-base) var(--ease),
    margin-top var(--t-base) var(--ease),
    border-radius var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    max-width var(--t-base) var(--ease),
    transform var(--t-base) var(--ease);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid transparent;
}
/* always visible, no auto-hide on scroll */
.nav.is-hidden { transform: translateY(0); }
.nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: saturate(220%) blur(32px);
  -webkit-backdrop-filter: saturate(220%) blur(32px);
  margin-top: 14px;
  max-width: calc(var(--max) - 2 * var(--pad));
  width: calc(100% - 32px);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 36px -12px rgba(0, 0, 0, 0.16),
    0 2px 6px rgba(0, 0, 0, 0.06);
  border-bottom-color: transparent;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: var(--gap);
}
.nav.is-scrolled .nav__inner { height: 56px; padding: 0 clamp(1rem, 3vw, 1.5rem); }
.nav__brand {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  color: var(--ink);
}
.nav__mark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  letter-spacing: -0.005em;
  line-height: 0.88;
  font-size: 14px;
  font-weight: 600;
}
.nav__mark__top, .nav__mark__bot { display: block; }
.nav__mark__top { letter-spacing: -0.005em; }
.nav__mark__bot { letter-spacing: -0.005em; margin-left: 8px; }
.nav__mark-dot { color: var(--accent); font-weight: 700; }
.nav__brand { align-items: center; gap: 0; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4.5vw, 56px);
  list-style: none;
}
.nav__link {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  padding: 6px 0;
  transition: color var(--t-fast) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 2px;
  height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after { transform: scaleX(1); transform-origin: right center; }

.nav__meta {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.nav__meta-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink);
  margin-right: 8px;
  vertical-align: 1px;
  animation: pulse 2.6s var(--ease-out) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.nav__menu-btn { display: none; }

/* mobile / narrow desktop nav, collapse to hamburger earlier */
@media (max-width: 960px) {
  .nav__links, .nav__meta { display: none; }
  .nav__menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 6px 4px;
    position: relative;
    z-index: 70;
  }

  /* Three-bar hamburger that animates into an X when .is-open */
  .nav__menu-btn__bars {
    position: relative;
    display: inline-block;
    width: 22px; height: 16px;
  }
  .nav__menu-btn__bar {
    position: absolute;
    left: 0; right: 0;
    height: 1.6px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 320ms cubic-bezier(.22,.7,.2,1), opacity 220ms ease, top 240ms cubic-bezier(.22,.7,.2,1);
    transform-origin: center;
  }
  .nav__menu-btn__bar:nth-child(1) { top: 2px; }
  .nav__menu-btn__bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
  .nav__menu-btn__bar:nth-child(3) { top: calc(100% - 3.6px); }
  /* X state */
  .nav__menu-btn.is-open .nav__menu-btn__bar:nth-child(1),
  .nav__menu-btn__bars.is-x .nav__menu-btn__bar:nth-child(1) {
    top: 50%; transform: translateY(-50%) rotate(45deg);
  }
  .nav__menu-btn.is-open .nav__menu-btn__bar:nth-child(2),
  .nav__menu-btn__bars.is-x .nav__menu-btn__bar:nth-child(2) {
    opacity: 0; transform: translateY(-50%) scaleX(0);
  }
  .nav__menu-btn.is-open .nav__menu-btn__bar:nth-child(3),
  .nav__menu-btn__bars.is-x .nav__menu-btn__bar:nth-child(3) {
    top: 50%; transform: translateY(-50%) rotate(-45deg);
  }
  .nav__menu-btn:hover .nav__menu-btn__bar:nth-child(1) { transform: translateY(-2px); }
  .nav__menu-btn:hover .nav__menu-btn__bar:nth-child(3) { transform: translateY(2px); }
  .nav__menu-btn.is-open:hover .nav__menu-btn__bar:nth-child(1) { transform: translateY(-50%) rotate(45deg); }
  .nav__menu-btn.is-open:hover .nav__menu-btn__bar:nth-child(3) { transform: translateY(-50%) rotate(-45deg); }

  .menu {
    /* Cream strips behind status bar / floating URL bar in iOS Safari are a
       known WebKit limitation, Safari clamps position:fixed to the visual
       viewport regardless of viewport-unit. Chrome iOS + DuckDuckGo iOS
       honour 100lvh and extend behind their chrome. Accepted as Safari-only
       cosmetic quirk. Safe-area padding kept so close button + content stay
       clear of UI bars on browsers that DO let the menu extend behind. */
    position: fixed; inset: 0;
    min-height: 100vh;
    min-height: 100lvh;
    z-index: 60;
    background: transparent;
    color: var(--bg);
    /* Generous top padding so menu items have breathing room below the
       brand mark at top-left. Was 80px / safe+32, felt cramped with
       the logo right above. */
    padding-top: max(140px, calc(env(safe-area-inset-top) + 96px));
    padding-right: var(--pad);
    padding-bottom: max(calc(var(--pad) + 8px), calc(env(safe-area-inset-bottom) + var(--pad)));
    padding-left: var(--pad);
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: hidden;
    transition: visibility 0s linear 0.54s;
    overflow-y: auto;
    isolation: isolate;
  }
  /* SVG background, its <path> is morphed by JS each frame.
     Drawn beneath the items, which sit at z:1. */
  .menu > *:not(.menu__bg):not(.menu__dots):not(.menu__brand) { position: relative; z-index: 1; }
  .menu__bg,
  .menu > .menu__bg {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;
  }
  .menu__bg path { fill: var(--ink); }
  .menu > .menu__dots { z-index: 0; }
  .menu.is-open {
    visibility: visible;
    transition: visibility 0s linear 0s;
  }
  /* Recolor links + close button + meta against the new dark surface */
  .menu .menu__link { color: var(--bg); }
  .menu .menu__link__sub { color: rgba(255,255,255,0.55); }
  .menu .menu__link:hover { color: var(--accent); }
  .menu .menu__close { color: var(--bg); }
  .menu .menu__close:hover { color: var(--accent); }
  .menu .menu__meta-text { color: rgba(255,255,255,0.7); }
  .menu .menu__meta-link { color: var(--bg); }
  .menu .menu__meta-link:hover { color: var(--accent); }
  .menu .menu__meta-dot { background: var(--accent); }
  .menu .menu__link__arrow { color: rgba(255,255,255,0.4); }

  /* hellomonday-style item enter: items start ~50vw to the right, slide in
     with Power1.easeOut (Quad), tight 10ms stagger, base 300ms delay so the
     panel leads them in. Mirrors GSAP: to({delay:.3+.01*i, .7, opacity:1, x:0, easeOut}) */
  .menu__list > li,
  .menu .menu__meta {
    opacity: 0;
    transform: translateX(50vw);
    transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
  }
  .menu.is-open .menu__list > li,
  .menu.is-open .menu__meta {
    opacity: 1;
    transform: translateX(0);
  }
  /* Panel completes at ~800ms (520 + 280 trail). Items follow. */
  .menu.is-open .menu__list > li:nth-child(1) { transition-delay: 0.78s; }
  .menu.is-open .menu__list > li:nth-child(2) { transition-delay: 0.84s; }
  .menu.is-open .menu__list > li:nth-child(3) { transition-delay: 0.90s; }
  .menu.is-open .menu__list > li:nth-child(4) { transition-delay: 0.96s; }
  .menu.is-open .menu__list > li:nth-child(5) { transition-delay: 1.02s; }
  .menu.is-open .menu__meta { transition-delay: 1.08s; }

  @media (prefers-reduced-motion: reduce) {
    .menu,
    .menu__list > li,
    .menu .menu__meta { transition-duration: 1ms !important; transition-delay: 0ms !important; }
  }
  /* Dotted matrix canvas as full-bleed background */
  .menu__dots {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
  }
  .menu > *:not(.menu__dots):not(.menu__brand) { position: relative; z-index: 1; }
  /* Brand mark inside the open menu, top-left. Logo internal structure
     stays as designed (the "serif" indent is intentional). */
  .menu__brand {
    position: absolute;
    top: max(8px, calc(env(safe-area-inset-top) + 4px));
    left: var(--pad);
    z-index: 2;
    text-decoration: none;
    color: var(--bg);
    font-size: 14px;
  }
  .menu__brand .nav__mark {
    font-size: inherit;
    color: inherit;
  }
  .menu__brand .nav__mark-dot {
    color: var(--accent);
  }

  .menu__close {
    position: absolute !important;
    /* Push below the iOS status bar when the menu extends behind it. */
    top: max(10px, calc(env(safe-area-inset-top) + 10px)) !important;
    right: var(--pad) !important;
    left: auto !important;
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    background: none;
    border: 0;
    cursor: pointer;
    z-index: 70;
    padding: 0 4px;
    transition: color 0.2s ease;
  }
  .menu__close .nav__menu-btn__bars.is-x {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .menu__close:hover { color: var(--accent); }
  .menu__close:hover .nav__menu-btn__bars.is-x { transform: scale(1.18); }
  .menu__close:active .nav__menu-btn__bars.is-x {
    transform: scale(0.85);
    transition-duration: 0.12s;
  }
  .menu__close .nav__menu-btn__bars { width: 22px; height: 16px; display: inline-block; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menu__list { list-style: none; display: flex; flex-direction: column; gap: 40px; margin-top: 24px; padding: 0; }
  .menu__link {
    display: block;
    font-size: clamp(25px, 5.6vw, 45px);
    font-weight: 480;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: var(--ink);
    text-decoration: none;
    position: relative;
    transition: color 240ms ease, transform 240ms cubic-bezier(.22,.7,.2,1);
  }
  .menu__link__title { display: block; }
  .menu__link__sub {
    display: block;
    margin-top: 8px;
    max-width: 32ch;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--muted);
  }
  .menu__link:hover { color: var(--accent); transform: translateX(6px); }
  .menu__link__arrow {
    display: inline-block;
    width: 0.42em;
    height: 0.42em;
    margin-left: 0.18em;
    vertical-align: baseline;
    color: var(--muted);
    transition: opacity 240ms ease, transform 280ms cubic-bezier(.22,.7,.2,1), color 240ms ease;
  }
  .menu__link:hover .menu__link__arrow,
  .menu__link:focus-visible .menu__link__arrow,
  .menu__link:active .menu__link__arrow {
    color: var(--accent);
    transform: translate(2px, -2px);
  }
  /* Desktop / hover-capable devices: arrow hidden until the link is interacted with. */
  @media (hover: hover) {
    .menu__link__arrow { opacity: 0; }
    .menu__link:hover .menu__link__arrow,
    .menu__link:focus-visible .menu__link__arrow { opacity: 1; }
  }
  .menu__meta {
    margin-top: auto;
    padding-top: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  .menu__meta-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ink);
    animation: pulse 2.6s var(--ease-out) infinite;
  }
  .menu__meta-text { flex: 0 1 auto; }
  .menu__meta-link {
    margin-left: auto;
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease, gap 0.2s ease;
  }
  .menu__meta-link:hover { color: var(--accent); gap: 10px; }
  .menu__meta-arrow { display: inline-block; transition: transform 0.2s ease; }
  .menu__meta-link:hover .menu__meta-arrow { transform: translateX(2px); }
}
@media (min-width: 961px) { .menu { display: none; } }

/* ----------------------------------------------------------------
   sections, vertical rhythm
---------------------------------------------------------------- */
main { padding-top: 0; }

/* hero begins at viewport top so the dot matrix extends behind the nav */
main > .hero:first-child {
  padding-top: clamp(140px, 18vw, 220px);
}

.section {
  padding-top: clamp(72px, 12vw, 160px);
  padding-bottom: clamp(72px, 12vw, 160px);
}
.section--tight { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(48px, 8vw, 96px); }
.section + .section { border-top: 1px solid var(--rule); }

/* section label, parenthetical, dasupply-style */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-bottom: clamp(28px, 4vw, 48px);
}
/* removed per feedback-no-dash-before-eyebrows, the 24x1px rule before
   every eyebrow read as AI-design slop and added no information. */

/* ----------------------------------------------------------------
   hero, large tagline, generous space
---------------------------------------------------------------- */
.hero {
  padding-top: clamp(96px, 18vw, 200px);
  padding-bottom: clamp(48px, 8vw, 96px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Floating scroll cue at the bottom of the hero, signals "more below" */
.scroll-cue {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(16px, 2vw, 28px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.scroll-cue svg {
  width: 12px;
  height: 18px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: scroll-cue-bob 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-bob {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
}
.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) 55%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
}
.hero__line, .hero__meta {
  position: relative;
  z-index: 1;
}
.hero__line {
  font-family: var(--font);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.05;
  color: var(--ink);
  max-width: 18ch;
}
.hero__line em {
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
}
.hero__meta {
  margin-top: clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: end;
}
.hero__bio {
  grid-column: 1 / span 6;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink);
  max-width: 52ch;
  line-height: 1.5;
}
.hero__bio strong { font-weight: 500; }
.hero__avail {
  grid-column: 9 / span 4;
  text-align: right;
  font-size: 13px;
  color: var(--muted);
}
.hero__avail strong { display: block; color: var(--ink); font-weight: 500; margin-top: 6px; }

/* Solid pill button, ports the archive's "Let's talk shop" CTA exactly */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 40px);
  padding: 12px 22px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  width: fit-content;
}
.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(--bg);
}
.hero__cta:active { transform: translateY(0); }
.hero__cta span[aria-hidden] {
  display: inline-block;
  transition: transform 0.2s ease;
}
.hero__cta:hover span[aria-hidden] { transform: translateX(3px); }

@media (max-width: 720px) {
  .hero__meta { grid-template-columns: 1fr; }
  .hero__bio, .hero__avail { grid-column: auto; text-align: left; }
  .hero__avail { margin-top: 12px; }
}

/* ----------------------------------------------------------------
   index work list, film-credits style, image preview on hover
---------------------------------------------------------------- */
.work-list { list-style: none; }
.work-item {
  position: relative;
  border-top: 1px solid var(--rule);
}
.work-item:last-child { border-bottom: 1px solid var(--rule); }

.work-item__row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  align-items: baseline;
  gap: clamp(16px, 3vw, 36px);
  padding: clamp(22px, 3vw, 32px) 0;
  position: relative;
  transition: padding-left var(--t-base) var(--ease-out);
}
.work-item:hover .work-item__row { padding-left: 12px; }
.work-item__num {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.work-item__title {
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 480;
  letter-spacing: -0.025em;
  line-height: 1.05;
  transition: color var(--t-base) var(--ease);
}
.work-item__tag {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.work-item__year {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.work-item:hover .work-item__title { color: var(--muted); }

/* image preview that floats by cursor */
.work-preview {
  position: fixed;
  top: 0; left: 0;
  width: clamp(220px, 24vw, 360px);
  aspect-ratio: 4 / 5;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
  overflow: hidden;
  background: var(--rule);
}
.work-preview.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.work-preview img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .work-preview { display: none; } }

/* ----------------------------------------------------------------
   home, selected work tiles
---------------------------------------------------------------- */
.selected {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap) var(--gap);
  row-gap: clamp(48px, 8vw, 96px);
}
.tile { display: block; color: inherit; }
.tile--lg { grid-column: span 12; }
.tile--md { grid-column: span 6; }
.tile--sm { grid-column: span 6; }

@media (max-width: 720px) {
  .tile--md, .tile--sm { grid-column: span 12; }
}

.tile__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, #ECEAE2 0%, #DEDBD0 100%);
  overflow: hidden;
  margin-bottom: 18px;
}
.tile--md .tile__media,
.tile--sm .tile__media { aspect-ratio: 4 / 5; }

.tile__media::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(22, 22, 19, 0);
  transition: background var(--t-base) var(--ease);
}
.tile:hover .tile__media::after { background: rgba(22, 22, 19, 0.04); }

.tile__media img,
.tile__media .tile__placeholder {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease-out);
}
.tile:hover .tile__media img,
.tile:hover .tile__media .tile__placeholder { transform: scale(1.025); }

.tile__placeholder {
  display: grid; place-items: center;
  background: linear-gradient(160deg, #ECEAE2 0%, #DEDBD0 60%, #CFCBBE 100%);
  color: rgba(22, 22, 19, 0.28);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.tile__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 4px;
}
.tile__title {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.tile__tag {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.tile__desc {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
  max-width: 48ch;
  line-height: 1.5;
}

/* ----------------------------------------------------------------
   editorial, philosophy + ai
---------------------------------------------------------------- */
.editorial {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.editorial__title {
  grid-column: 1 / span 12;
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 480;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin-bottom: clamp(40px, 6vw, 80px);
  max-width: 14ch;
}
.editorial__lede {
  grid-column: 1 / span 7;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.4;
  color: var(--ink);
}
.editorial__lede + .editorial__lede { margin-top: clamp(24px, 3vw, 40px); }

.prose {
  grid-column: 3 / span 7;
  margin-top: clamp(56px, 8vw, 96px);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
}
.prose > * + * { margin-top: 1.2em; }
.prose h3 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-top: 2.4em;
  margin-bottom: 0.6em;
}
.prose p { max-width: 62ch; }
.prose em { font-style: italic; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }

.pullquote {
  grid-column: 2 / span 9;
  margin: clamp(40px, 5vw, 64px) 0;
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
  max-width: 56ch;
}

@media (max-width: 900px) {
  .prose { grid-column: 1 / -1; }
  .pullquote { grid-column: 1 / -1; }
}

/* Philosophy: stats strip, inline row, no dividers, tight spacing */
.stats {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: baseline;
}
.stat {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  flex: 0 1 auto;
}
.stat__num {
  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;
  margin: 0;
}
.stat__label {
  margin: 0;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  max-width: none;
}

/* Philosophy: worked-with, monospace wordmarks, no dividers, tight */
.worked-with-wrap {
  margin: 0;
  padding: 0;
}
.worked-with {
  list-style: none;
  margin: clamp(8px, 1vw, 12px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
  align-items: baseline;
}
.worked-with 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) {
  .worked-with li { font-size: 13px; }
}

/* two-column principles list */
.principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(36px, 5vw, 64px) var(--gap);
  margin-top: clamp(48px, 6vw, 80px);
}
@media (max-width: 720px) { .principles { grid-template-columns: 1fr; } }

.principle {
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}
.principle__label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.principle__h {
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  line-height: 1.2;
}
.principle__p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 44ch;
}
.principle--featured {
  border-top-color: var(--ink);
  border-top-width: 2px;
  padding-top: 18px;
}
.principle--featured .principle__label {
  color: var(--ink);
  font-weight: 500;
}
.principle__badge {
  display: inline-block;
  margin-left: 6px;
  color: var(--accent, var(--ink));
  font-size: 10px;
  vertical-align: 1px;
}

/* ----------------------------------------------------------------
   footer
---------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--rule);
  padding: clamp(48px, 8vw, 96px) 0 32px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.footer__dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  -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%);
}
.footer > .shell {
  position: relative;
  z-index: 1;
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: end;
}
.footer__cta {
  grid-column: 1 / span 7;
  font-size: clamp(36px, 6vw, 88px);
  font-weight: 480;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.footer__cta a {
  position: relative;
  display: inline-block;
}
.footer__cta a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 8%;
  height: 2px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 540ms var(--ease-out);
}
.footer__cta a:hover::after { transform: scaleX(1); }

.footer__side {
  grid-column: 9 / span 4;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14px;
  color: var(--muted);
}
.footer__side a:hover { color: var(--ink); }

.footer__bar {
  margin-top: clamp(56px, 8vw, 96px);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .footer__cta, .footer__side { grid-column: 1 / -1; }
  .footer__side { margin-top: 36px; }
}

/* ----------------------------------------------------------------
   small utilities + motion
---------------------------------------------------------------- */
/* reveals are visible by default, only hidden once JS confirms it
   can animate them in, so screenshots / no-JS readers see content */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
}
.js .reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }

/* Hero reveals run on page load via CSS animation, not scroll-linked.
   The scroll-linked driver in script.js skips elements inside .hero. */
.js .hero .reveal {
  animation: hero-reveal 720ms var(--ease-out) both;
  opacity: 0;
}
.js .hero .reveal[data-delay="1"] { animation-delay: 80ms; }
.js .hero .reveal[data-delay="2"] { animation-delay: 160ms; }
.js .hero .reveal[data-delay="3"] { animation-delay: 240ms; }
.js .hero .reveal[data-delay="4"] { animation-delay: 320ms; }
@keyframes hero-reveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* scroll-fade, verbatim from live cherifsansserif.com (main.css L4736).
   Body content starts at 40% opacity + slight Y-offset, becomes fully
   saturated as it enters the viewport. Subtle, restrained. */
.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;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-fade { opacity: 1; transform: none; transition: none; }
}

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

/* link arrow utility */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
}
.arrow-link span { transition: transform var(--t-base) var(--ease-out); }
.arrow-link:hover span { transform: translateX(6px); }
.arrow-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform var(--t-base) var(--ease-out);
}
.arrow-link:hover::after { transform: scaleX(0); transform-origin: left center; }

/* ----------------------------------------------------------------
   pills, credentials row in hero
---------------------------------------------------------------- */
/* pills, match live cherifsansserif.com exactly (.hero__credential style) */
/* Match live cherifsansserif.com .hero__credential exactly */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.pill {
  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: rgba(142, 146, 160, 0.10);
  color: var(--accent);
  border: 0.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-family: var(--font);
  line-height: 1.2;
}
.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
a.pill {
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
  cursor: pointer;
}
.pill__ext {
  margin-left: 6px;
  opacity: 0.6;
  transition: opacity 200ms ease, transform 200ms ease;
}
a.pill:hover {
  background: rgba(142, 146, 160, 0.18);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--ink);
}
a.pill:hover .pill__ext {
  opacity: 1;
  transform: translate(1px, -1px);
}

/* ----------------------------------------------------------------
   companies grid, homepage, mid-page block
---------------------------------------------------------------- */
.companies {
  padding: clamp(40px, 6vw, 80px) 0;
}
.companies__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(20px, 6vw, 64px);
}
.companies__head {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: clamp(40px, 6vw, 64px);
  font-weight: 500;
}
.companies__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(48px, 6vw, 80px) clamp(40px, 5vw, 72px);
}
/* asymmetric vertical stagger, every second cell drops, third lifts */
.company:nth-child(3n+2) { transform: translateY(28px); }
.company:nth-child(3n+3) { transform: translateY(-14px); }
.company { max-width: 32ch; }
@media (max-width: 920px) {
  .company:nth-child(3n+2), .company:nth-child(3n+3) { transform: none; }
}
.company__name {
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.2;
}
.company__desc {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--muted);
  font-weight: 400;
}
.company__nda {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 6px;
  font-style: normal;
  vertical-align: 2px;
  letter-spacing: 0;
}
@media (max-width: 920px) {
  .companies__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .companies__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ----------------------------------------------------------------
   AI page, engine stats + variant table mockup + CV skeleton
   borrowed in spirit from cv-engine-case-study.pages.dev
---------------------------------------------------------------- */
.engine-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  font-size: 13px;
  color: var(--muted);
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
  padding: 14px 0;
}
.engine-stats span {
  padding: 0 clamp(.75rem, 2vw, 1.5rem);
  border-right: 1px solid var(--rule);
  line-height: 1;
}
.engine-stats span:last-child { border-right: none; }
.engine-stats span:first-child { padding-left: 0; }
.engine-stats b {
  color: var(--ink);
  font-weight: 600;
  margin-right: 6px;
}

.engine-mock__h {
  font-family: var(--font);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 clamp(20px, 3vw, 32px);
  max-width: 28ch;
  color: var(--ink);
}

.engine-mock {
  background: #1A1A1A;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(22,22,19,0.12), 0 2px 8px rgba(22,22,19,0.06);
  max-width: 880px;
}
.engine-mock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #232323;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 11px;
  color: #888;
}
.engine-mock__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #3a3a3a;
}
.engine-mock__dot:nth-child(1) { background: #ff5f57; }
.engine-mock__dot:nth-child(2) { background: #febc2e; }
.engine-mock__dot:nth-child(3) { background: #28c840; }
.engine-mock__path { margin-left: 12px; }
.engine-mock__lang { margin-left: auto; color: #aaa; }
.engine-mock__table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: #ccc;
}
.engine-mock__table th,
.engine-mock__table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #2a2a2a;
}
.engine-mock__table th {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #777;
  font-weight: 500;
}
.engine-mock__table tr:last-child td { border-bottom: none; }
.engine-mock__table tr.is-focus { background: #1f1f1f; }
.engine-mock__table tr.is-focus td.engine-mock__emp { color: #F5F5F5; }
.engine-mock__emp { color: #aaa; font-weight: 500; }
.v-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}
.v-pill--draft { background: #3a2a14; color: #f5a623; }
.v-pill--applied { background: #14331e; color: #4ade80; }

/* Pipeline diagram, ported from cv-engine-case-study.pages.dev */
.engine-mock__lede {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
  margin: 0 0 clamp(24px, 3vw, 36px);
}
.pipeline-diagram {
  background: #F0EBDC;
  border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  overflow-x: auto;
}

/* (unused) CV skeleton, two 2-page mockups side by side */
.cv-skeleton {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 32px);
  max-width: 880px;
}
.cv-skeleton__page {
  background: #FBF7EE;
  border: 0.5px solid var(--rule);
  border-radius: 4px;
  padding: clamp(14px, 1.8vw, 22px);
  aspect-ratio: 1 / 1.414;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 6px 20px rgba(22,22,19,0.06);
}
.cv-skeleton__header {
  display: flex;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--rule);
  margin-bottom: 12px;
  align-items: center;
}
.cv-skeleton__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--rule);
  flex-shrink: 0;
}
.cv-skeleton__head-text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cv-skeleton__name { height: 8px; width: 60%; background: var(--ink); border-radius: 2px; }
.cv-skeleton__role { height: 5px; width: 80%; background: var(--rule); border-radius: 2px; }
.cv-skeleton__role--short { width: 50%; }
.cv-skeleton__body {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  flex: 1;
  min-height: 0;
}
.cv-skeleton__body--page2 { padding-top: 6px; }
.cv-skeleton__sidebar,
.cv-skeleton__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cv-skeleton__section-h {
  height: 5px;
  width: 40%;
  background: var(--journey-red, #D8443A);
  border-radius: 1px;
  margin-top: 6px;
  margin-bottom: 2px;
}
.cv-skeleton__main .cv-skeleton__section-h { width: 30%; }
.cv-skeleton__entry { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
.cv-skeleton__entry-h { height: 5px; width: 55%; background: var(--ink); border-radius: 1px; opacity: 0.7; }
.cv-skeleton__line {
  height: 3px;
  width: 100%;
  background: var(--rule);
  border-radius: 1px;
}
.cv-skeleton__line--95 { width: 95%; }
.cv-skeleton__line--90 { width: 90%; }
.cv-skeleton__line--85 { width: 85%; }
.cv-skeleton__line--80 { width: 80%; }
.cv-skeleton__line--75 { width: 75%; }
.cv-skeleton__line--70 { width: 70%; }
.cv-skeleton__line--65 { width: 65%; }
.cv-skeleton__line--60 { width: 60%; }
.cv-skeleton__page-num {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.05em;
}
@media (max-width: 760px) {
  .cv-skeleton { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   case cards (work.html), strategic skeleton style, alternating sides
   borrowed from live cherifsansserif.com /work/ project cards
---------------------------------------------------------------- */
.case-card {
  border-top: 0.5px solid var(--rule);
  padding: clamp(40px, 6vw, 80px) 0;
}
.case-card:last-of-type { border-bottom: 0.5px solid var(--rule); }
.case-card__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
}
.case-card__inner--reverse .case-card__media { order: 2; }
.case-card__inner--reverse .case-card__body { order: 1; }
.case-card__media {
  width: 100%;
  aspect-ratio: 320 / 200;
  background: rgba(35, 33, 28, 0.02);
  border-radius: 4px;
  overflow: hidden;
}
.case-skeleton { display: block; width: 100%; height: 100%; }
.case-skeleton .thumb-rule {
  stroke: var(--rule); stroke-width: 0.5;
}
.case-skeleton .thumb-line {
  stroke: var(--muted); stroke-width: 1; fill: none;
}
.case-skeleton .thumb-box {
  fill: none; stroke: var(--ink); stroke-width: 1;
}
.case-skeleton .thumb-box-faint {
  fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 3;
}
.case-skeleton .thumb-eyebrow {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--muted);
}
.case-skeleton .thumb-num {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 10px;
  fill: var(--muted);
}
.case-skeleton .thumb-num--strong {
  fill: var(--ink); font-weight: 600;
}
.case-card__meta {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--muted);
  margin: 0 0 8px;
}
.case-card__title {
  font-family: var(--font);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 clamp(16px, 2vw, 24px);
  max-width: 22ch;
}
.case-card__scope {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 12px;
  max-width: 56ch;
}
.case-card__scope strong {
  display: inline-block;
  width: 80px;
  font-weight: 500;
  color: var(--muted);
}
.case-card__scope em {
  font-style: italic;
  color: var(--accent);
}
.case-card__teaser {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 clamp(20px, 2.5vw, 28px);
  max-width: 50ch;
}
.case-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color 200ms ease, border-color 200ms ease, gap 200ms ease;
}
.case-card__cta svg { transition: transform 200ms ease; }
/* clickable wrapper, entire card is a link */
a.case-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: background 240ms ease;
}
a.case-link:hover {
  background: rgba(35,33,28,0.02);
}
a.case-link:hover .case-card__cta { color: var(--accent); border-color: var(--accent); gap: 10px; }
a.case-link:hover .case-card__cta svg { transform: translateX(3px); }
@media (max-width: 760px) {
  .case-card__inner { grid-template-columns: 1fr; }
  .case-card__inner--reverse .case-card__media { order: 1; }
  .case-card__inner--reverse .case-card__body { order: 2; }
  .case-card__scope strong { display: block; width: auto; margin-bottom: 2px; }
}

/* ----------------------------------------------------------------
   Case pages, force light-mode palette to match site-v2's warm cream.
   Overrides legacy-work.css tokens; <html data-theme="light"> locks the
   live CSS's dark-mode auto-switch off too.
---------------------------------------------------------------- */
body.case-page {
  --paper: #F5EFE2;
  --paper-soft: #FBF7EE;
  --ink: #161613;
  --ink-soft: #3D3D3D;
  --ink-faint: #6B6B66;
  --rule: #E1DBCC;
  --accent: #5C5F66;
  background: var(--paper);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  body.case-page {
    --paper: #F5EFE2;
    --paper-soft: #FBF7EE;
    --ink: #161613;
    --ink-soft: #3D3D3D;
    --ink-faint: #6B6B66;
    --rule: #E1DBCC;
    --accent: #5C5F66;
    background: var(--paper);
    color: var(--ink);
  }
}

/* Restore site-v2's floating header on case pages. The legacy CSS pins
   the nav as a permanent glass pill via !important; we override here
   so the nav is transparent at scrollY=0 and only transitions to the
   pill when JS adds .is-scrolled. */
body.case-page .nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
  box-shadow: 0 0 0 transparent !important;
  max-width: 100% !important;
  border-bottom: 1px solid transparent !important;
  transition:
    background var(--t-base, 320ms) var(--ease, ease),
    backdrop-filter var(--t-base, 320ms) var(--ease, ease),
    -webkit-backdrop-filter var(--t-base, 320ms) var(--ease, ease),
    margin-top var(--t-base, 320ms) var(--ease, ease),
    border-radius var(--t-base, 320ms) var(--ease, ease),
    box-shadow var(--t-base, 320ms) var(--ease, ease),
    max-width var(--t-base, 320ms) var(--ease, ease) !important;
}
body.case-page .nav.is-scrolled {
  background: color-mix(in srgb, var(--paper) 55%, transparent) !important;
  backdrop-filter: saturate(220%) blur(32px) !important;
  -webkit-backdrop-filter: saturate(220%) blur(32px) !important;
  margin-top: 14px !important;
  max-width: calc(var(--max) - 2 * var(--pad)) !important;
  width: calc(100% - 32px) !important;
  border-radius: 18px !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 36px -12px rgba(0, 0, 0, 0.16),
    0 2px 6px rgba(0, 0, 0, 0.06) !important;
  border-bottom-color: transparent !important;
}

/* ----------------------------------------------------------------
   case-hero + work-index + project cards
   ported verbatim from live cherifsansserif.com /work/
---------------------------------------------------------------- */
.case-hero {
  padding-top: clamp(120px, 14vw, 200px);
  padding-bottom: clamp(40px, 6vw, 80px);
}
.case-hero__crumb {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.5rem;
}
.case-hero__crumb a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.case-hero__crumb a:hover { color: var(--ink); border-color: var(--rule); }
.case-hero__title {
  font-family: var(--font);
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0 0 1.5rem;
  max-width: 20ch;
  color: var(--ink);
}
.case-hero__title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 700;
}
.case-hero__lede {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 50ch;
}

.work-index {
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(40px, 6vw, 80px);
}
.project__link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 200ms ease;
}
.project__link:hover .project__title { color: var(--ink); }
.project__link:hover .project__cta { background: var(--ink); color: var(--bg); transform: translateY(-1px); }
.project {
  display: block;
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  border-bottom: 1px solid var(--rule);
}
.project:last-child { border-bottom: none; }
.project__content { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem); max-width: 980px; margin: 0 auto; }
.project__media {
  position: relative;
  overflow: hidden;
  background: transparent;
  border-radius: 0;
  padding: 0;
  width: 100%;
}
.project__media svg { width: 100%; height: auto; display: block; }
.project__content { padding: 0; }
.project__index {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 0 0 0.875rem;
  font-weight: 500;
}
.project__tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 0.875rem;
}
.project__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  text-transform: uppercase;
}
.project__tag--strategic { background: rgba(60, 70, 60, 0.08); color: var(--ink); }
.project__tag--visual { background: rgba(220, 110, 90, 0.10); color: #B5462A; }
.project__co {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 500;
}
.project__title {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: var(--ink);
  transition: color 200ms ease;
}
.project__title em { font-style: italic; color: var(--accent); font-weight: 700; }
.project__excerpt {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 0 1.75rem;
}
.project__excerpt em { font-style: italic; }
.project__meta {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 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: 10px;
  padding: 11px 22px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  width: fit-content;
}
.project__cta span[aria-hidden] {
  display: inline-block;
  transition: transform 0.2s ease;
}
.project__link:hover .project__cta {
  background: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.12);
  color: var(--bg);
}
.project__link:hover .project__cta span[aria-hidden] { transform: translateX(3px); }

/* ----------------------------------------------------------------
   Overview HTML mockups (.omock)
   Each card preview is wrapped in a Mac-style browser window:
   chrome dots + faint URL pill on a white surface, hairline border,
   soft shadow. Per-case content lives inside .omock__body.
---------------------------------------------------------------- */
.project__media.omock {
  background: #FFFFFF;
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 18px 40px -22px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  padding: 0;
  width: 100%;
  max-width: 720px;
  margin: 0.75rem 0 1rem;
}
.omock__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  background: #FAFAF9;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
}
.omock__chrome i {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #D8DADC;
}
.omock__chrome i:nth-child(1) { background: #ff5f57; }
.omock__chrome i:nth-child(2) { background: #febc2e; }
.omock__chrome i:nth-child(3) { background: #28c840; }
.omock__url {
  margin: 0 auto;
  flex: 1;
  max-width: 280px;
  height: 20px;
  background: #FFFFFF;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 5px;
}
.omock__body { padding: 22px 26px; }

/* Color tokens used across mockups */
:root {
  --omock-grey: #C4C8CE;
  --omock-grey-deep: #9CA3AF;
  --omock-ink: #14171B;
  --omock-tile: #FAFAF9;
  --omock-hairline: color-mix(in srgb, var(--ink) 9%, transparent);
}

/* === Heineken, B2B catalog: 3 product cards in a row === */
.omock-hk .omock__body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.omock-hk__card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  background: var(--omock-tile);
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 8px;
}
.omock-hk__thumb { width: 100%; aspect-ratio: 3 / 2; border-radius: 4px; }
.omock-hk__thumb--red { background: linear-gradient(180deg, #E5121F 0%, #B40D17 100%); }
.omock-hk__thumb--gold { background: linear-gradient(180deg, #C99524 0%, #8E6612 100%); }
.omock-hk__thumb--blue { background: linear-gradient(180deg, #1F4D8A 0%, #143562 100%); }
.omock-hk__name { display: block; height: 8px; width: 70%; background: var(--omock-grey-deep); border-radius: 1px; }
.omock-hk__sub { display: block; height: 5px; width: 50%; background: var(--omock-grey); border-radius: 1px; }
.omock-hk__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.omock-hk__price { display: block; height: 8px; width: 36px; background: var(--omock-grey-deep); border-radius: 1px; }
.omock-hk__add {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  background: #00A04A; color: #FFFFFF;
  font: 600 10px/1 'Inter', sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 4px;
}

/* === StepStone, notification email with a 2.5-job carousel inside === */
.omock-ss .omock__body { display: flex; flex-direction: column; gap: 0; padding: 0; }
.omock-ss__head { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 14px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); }
.omock-ss__from { display: flex; align-items: center; gap: 10px; }
.omock-ss__avatar { width: 36px; height: 36px; border-radius: 50%; background: #0072EC; flex-shrink: 0; }
.omock-ss__from-lines { display: flex; flex-direction: column; gap: 5px; }
.omock-ss__sender { display: block; height: 7px; width: 130px; background: var(--omock-grey-deep); border-radius: 1px; }
.omock-ss__time { display: block; height: 5px; width: 60px; background: var(--omock-grey); border-radius: 1px; }
.omock-ss__subj { display: block; height: 10px; width: 60%; background: var(--omock-ink); border-radius: 1px; }
.omock-ss__email { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 16px; }
.omock-ss__logo { display: block; height: 18px; width: 96px; background: #0072EC; border-radius: 2px; }
.omock-ss__lede { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.omock-ss__lede span:nth-child(1) { display: block; height: 6px; width: 86%; background: var(--omock-grey-deep); border-radius: 1px; }
.omock-ss__lede span:nth-child(2) { display: block; height: 6px; width: 62%; background: var(--omock-grey); border-radius: 1px; }
.omock-ss__hello { display: block; height: 7px; width: 26%; background: var(--omock-grey-deep); border-radius: 1px; margin-top: 4px; }
.omock-ss__intro { display: flex; flex-direction: column; gap: 5px; }
.omock-ss__intro span { display: block; height: 5px; border-radius: 1px; background: var(--omock-grey); }
.omock-ss__intro span:nth-child(1) { width: 88%; }
.omock-ss__intro span:nth-child(2) { width: 64%; }
.omock-ss__jobs { display: flex; flex-direction: column; gap: 0; margin-top: 4px; border-top: 1px solid var(--omock-hairline); border-bottom: 1px solid var(--omock-hairline); }
.omock-ss__job {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
}
.omock-ss__job + .omock-ss__job { border-top: 1px solid var(--omock-hairline); }
.omock-ss__job-logo { width: 26px; height: 26px; border-radius: 5px; background: #0072EC; flex-shrink: 0; }
.omock-ss__job-logo--orange { background: #F2994A; }
.omock-ss__job-logo--purple { background: #6E3FB8; }
.omock-ss__job-logo--green { background: #00A04A; }
.omock-ss__job-logo--red { background: #DE2027; }
.omock-ss__job-text { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.omock-ss__job-title { display: block; height: 7px; width: 64%; background: var(--omock-grey-deep); border-radius: 1px; }
.omock-ss__job-meta { display: flex; gap: 8px; }
.omock-ss__job-meta span { display: block; height: 4px; border-radius: 1px; background: var(--omock-grey); }
.omock-ss__job-meta span:nth-child(1) { width: 60px; }
.omock-ss__job-meta span:nth-child(2) { width: 40px; }
.omock-ss__job-cta { width: 50px; height: 18px; border: 1px solid var(--omock-hairline); border-radius: 4px; flex-shrink: 0; }
.omock-ss__btn {
  display: inline-flex; align-items: center;
  margin: 4px 0 0;
  padding: 10px 18px;
  background: #DE2027; color: #FFFFFF;
  font: 600 11px/1 'Inter', sans-serif; letter-spacing: 0.04em;
  border-radius: 4px;
  align-self: flex-start;
}

/* === Finanzcheck, one question per screen === */
.omock-fc .omock__body {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 22px;
  padding: 36px 24px 40px;
  min-height: 280px;
}
.omock-fc__steps { display: flex; gap: 6px; width: 60%; }
.omock-fc__steps span { flex: 1; height: 3px; background: #E5E7EA; border-radius: 999px; }
.omock-fc__steps span.is-done { background: #1A56DB; }
.omock-fc__steps span.is-active { background: #1A56DB; opacity: 0.45; }
.omock-fc__q { display: block; height: 14px; width: 56%; background: var(--omock-grey-deep); border-radius: 1px; }
.omock-fc__hint { display: block; height: 6px; width: 32%; background: var(--omock-grey); border-radius: 1px; margin-top: -10px; }
.omock-fc__input {
  width: 70%;
  height: 56px;
  background: #FFFFFF;
  border: 1px solid var(--omock-hairline);
  border-radius: 8px;
  display: flex; align-items: center; padding: 0 18px;
  position: relative;
}
.omock-fc__input::after {
  content: "";
  display: block;
  width: 26%;
  height: 8px;
  background: var(--omock-grey-deep);
  border-radius: 1px;
}
.omock-fc__input::before {
  content: "€";
  position: absolute;
  right: 18px;
  color: var(--omock-grey-deep);
  font: 500 16px/1 'Inter', sans-serif;
}
.omock-fc__cta {
  height: 44px;
  width: 70%;
  background: #1A56DB;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.omock-fc__cta::after {
  content: "";
  display: block;
  width: 90px;
  height: 8px;
  background: #FFFFFF;
  border-radius: 1px;
  opacity: 0.95;
}

/* === obseed, athlete dashboard: sidebar + filled main canvas === */
.omock-obs .omock__body { display: grid; grid-template-columns: 72px 1fr; gap: 0; padding: 0; min-height: 320px; }
.omock-obs__side {
  background: var(--omock-tile);
  border-right: 1px solid var(--omock-hairline);
  padding: 16px 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.omock-obs__brand { width: 30px; height: 30px; border-radius: 8px; background: var(--omock-ink); margin-bottom: 8px; }
.omock-obs__nav { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.omock-obs__nav span { display: block; width: 22px; height: 22px; border-radius: 6px; background: var(--omock-grey); }
.omock-obs__nav span.is-active { background: var(--omock-ink); }
.omock-obs__main { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.omock-obs__topbar { display: flex; align-items: center; justify-content: space-between; }
.omock-obs__crumbs { display: flex; gap: 6px; align-items: center; }
.omock-obs__crumbs span { display: block; height: 6px; border-radius: 1px; background: var(--omock-grey); }
.omock-obs__crumbs span:nth-child(1) { width: 36px; }
.omock-obs__crumbs span:nth-child(2) { width: 4px; height: 4px; border-radius: 50%; }
.omock-obs__crumbs span:nth-child(3) { width: 60px; background: var(--omock-grey-deep); height: 8px; }
.omock-obs__avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #F9C536 0%, #E08018 100%); }
.omock-obs__hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
}
.omock-obs__chart {
  padding: 14px;
  background: var(--omock-tile);
  border: 1px solid var(--omock-hairline);
  border-radius: 8px;
  color: #6B7180;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 130px;
}
.omock-obs__chart-h { display: flex; align-items: center; justify-content: space-between; }
.omock-obs__chart-h span { display: block; height: 6px; background: var(--omock-grey); border-radius: 1px; }
.omock-obs__chart-h span:first-child { width: 60px; height: 8px; background: var(--omock-grey-deep); }
.omock-obs__chart-h span:last-child { width: 28px; }
.omock-obs__chart svg { width: 100%; height: 60px; display: block; }
.omock-obs__rings {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
  background: var(--omock-tile);
  border: 1px solid var(--omock-hairline);
  border-radius: 8px;
}
.omock-obs__ring { display: flex; align-items: center; gap: 10px; }
.omock-obs__ring-bar { flex: 1; height: 6px; background: #E5E7EA; border-radius: 999px; overflow: hidden; position: relative; }
.omock-obs__ring-bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.omock-obs__ring-bar--a::after { width: 78%; background: #1A56DB; }
.omock-obs__ring-bar--b::after { width: 54%; background: #00A04A; }
.omock-obs__ring-bar--c::after { width: 32%; background: #F9C536; }
.omock-obs__ring-val { width: 28px; height: 6px; background: var(--omock-grey-deep); border-radius: 1px; flex-shrink: 0; }
.omock-obs__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.omock-obs__kpi {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  background: var(--omock-tile);
  border: 1px solid var(--omock-hairline);
  border-radius: 6px;
}
.omock-obs__kpi-label { display: block; height: 4px; width: 60%; background: var(--omock-grey); border-radius: 1px; }
.omock-obs__kpi-value { display: block; height: 12px; width: 40%; background: var(--omock-grey-deep); border-radius: 1px; }
.omock-obs__kpi-spark { height: 22px; color: #6B7180; }
.omock-obs__kpi-spark svg { width: 100%; height: 100%; display: block; }
.omock-obs__kpi-spark--accent { color: #F9C536; }

/* === PEAX, Postverteilung interface (rail + mail list + groups) === */
.omock-pe { background: #11151F; border-color: #1A1F2E; }
.omock-pe .omock__chrome { background: #1A1F2E; border-bottom-color: #11151F; }
.omock-pe .omock__chrome i { background: #2A2F3E; }
.omock-pe .omock__chrome i:nth-child(1) { background: #ff5f57; }
.omock-pe .omock__chrome i:nth-child(2) { background: #febc2e; }
.omock-pe .omock__chrome i:nth-child(3) { background: #28c840; }
.omock-pe .omock__url { background: #11151F; border-color: #2A2F3E; }
.omock-pe .omock__body { display: grid; grid-template-columns: 64px 1fr 140px; gap: 0; padding: 0; min-height: 220px; }
.omock-pe__rail { background: #232B40; padding: 14px 10px; display: flex; flex-direction: column; gap: 14px; }
.omock-pe__brand { display: inline-block; width: 38px; height: 16px; background: #F9C536; border-radius: 3px; }
.omock-pe__rail-item { width: 44px; height: 8px; background: #2F384D; border-radius: 1px; }
.omock-pe__rail-item.is-active { background: #F9C536; }
.omock-pe__main { background: #1A1F2E; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.omock-pe__row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #F1ECDE; border-radius: 4px; }
.omock-pe__stamp { width: 22px; height: 14px; border-radius: 2px; flex-shrink: 0; }
.omock-pe__stamp--blue { background: #003C9E; }
.omock-pe__stamp--yellow { background: #F9C536; }
.omock-pe__stamp--brown { background: #5C3A1F; }
.omock-pe__stamp--red { background: #E60028; }
.omock-pe__lines { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.omock-pe__lines span { display: block; height: 4px; border-radius: 1px; }
.omock-pe__lines span:nth-child(1) { width: 40%; background: #11151F; }
.omock-pe__lines span:nth-child(2) { width: 60%; background: #6B7180; }
.omock-pe__chip { width: 34px; height: 12px; border-radius: 999px; flex-shrink: 0; }
.omock-pe__chip--orange { background: #F39C12; }
.omock-pe__chip--red { background: #E60028; }
.omock-pe__groups { background: #232B40; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.omock-pe__groups-h { display: block; height: 5px; width: 60%; background: #8A92A6; border-radius: 1px; }
.omock-pe__group { display: flex; align-items: center; gap: 8px; }
.omock-pe__avatar { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.omock-pe__name { flex: 1; height: 5px; background: #4A536B; border-radius: 1px; }

@media (max-width: 720px) {
  .project__media.omock { border-radius: 10px; margin: 0.25rem 0 0.5rem; }
  .omock__chrome { padding: 9px 12px; gap: 5px; }
  .omock__chrome i { width: 9px; height: 9px; }
  .omock__url { display: none; }
  .omock__body { padding: 16px 14px; }

  .omock-hk .omock__body { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 72%; gap: 10px; padding: 14px; }

  .omock-ss__head { padding: 14px 16px 12px; }
  .omock-ss__email { padding: 16px 16px 18px; gap: 12px; }

  .omock-fc .omock__body { padding: 24px 18px 28px; gap: 16px; min-height: 220px; }
  .omock-fc__q { width: 80%; }
  .omock-fc__input, .omock-fc__cta { width: 92%; }

  .omock-obs .omock__body { padding: 22px 16px 24px; }
  .omock-obs__levels {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 60%;
    gap: 14px;
    margin: 0 -16px;
    padding: 4px 16px;
    overflow: visible;
  }
  .omock-obs__level + .omock-obs__level { margin-left: 0; }
  .omock-obs__level + .omock-obs__level::before,
  .omock-obs__level + .omock-obs__level::after { display: none; }

  .omock-pe .omock__body { grid-template-columns: 56px 1fr; }
  .omock-pe__groups { display: none; }
}

/* Thumbnail SVG primitives, match live cherifsansserif.com */
.thumb-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  fill: var(--muted);
  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(--muted); 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(--muted); fill-opacity: 0.06; stroke: none; }
.thumb-bar-accent { fill: var(--accent); fill-opacity: 0.10; stroke: none; }
.thumb-bar-track { fill: var(--muted); fill-opacity: 0.15; stroke: none; }
.thumb-bar-fill { fill: var(--accent); stroke: none; }
.thumb-line-faint { stroke: var(--muted); 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(--muted);
  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(--bg);
  font-weight: 600;
}

/* ----------------------------------------------------------------
   case detail page (work-*.html), hero crumb, big skeleton, sections
---------------------------------------------------------------- */
.case-detail__hero {
  padding-top: clamp(120px, 16vw, 200px);
  padding-bottom: clamp(24px, 4vw, 40px);
}
.case-detail__crumb {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 clamp(20px, 3vw, 32px);
  letter-spacing: 0;
}
.case-detail__crumb a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.case-detail__crumb a:hover { color: var(--ink); border-color: var(--rule); }
.case-detail__title {
  font-family: var(--font);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 clamp(16px, 2vw, 24px);
  max-width: 20ch;
}
.case-detail__meta {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.case-detail__media-wrap {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(40px, 6vw, 80px);
}
.case-detail__media {
  background: rgba(35, 33, 28, 0.02);
  border: 0.5px solid var(--rule);
  border-radius: 6px;
  aspect-ratio: 320 / 200;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}
.case-detail__media .case-skeleton {
  width: 100%;
  height: 100%;
  display: block;
}
.case-detail__section {
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 56px);
  border-top: 0.5px solid var(--rule);
}
.case-detail__h {
  font-family: var(--font);
  font-size: clamp(11px, 1vw, 12px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 clamp(16px, 2vw, 24px);
}
.case-detail__p {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
}
.case-detail__p em {
  font-style: italic;
  color: var(--accent);
}
.case-detail__next {
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(24px, 3vw, 40px);
  border-top: 0.5px solid var(--rule);
}
.case-detail__next-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color 200ms ease, border-color 200ms ease, gap 200ms ease;
}
.case-detail__next-link svg { transition: transform 200ms ease; }
.case-detail__next-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  gap: 12px;
}
.case-detail__next-link:hover svg { transform: translateX(3px); }

/* AI page showcase, pulled below the standard site-v2 hero */
.ai-showcase {
  padding: clamp(40px, 6vw, 80px) 0;
  margin-top: clamp(-32px, -3vw, -12px);
  position: relative;
  z-index: 1;
}
.ai-showcase .hero-showcase { margin-top: 0; }

/* AI page pipeline, centered vertical timeline.
   A thin line runs through the centre; cards sit on the line and fly in
   from alternating sides as the user scrolls. Same pattern across all
   viewports, cards stay centred, only the entrance direction alternates. */
.pipeline {
  background: var(--soft);
  border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.pipeline__stages {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  margin: 0 0 48px;
  padding: 0;
  position: relative;
}
/* the centre line behind the cards */
.pipeline__stages::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0,
    #D4CFC1 16px,
    #D4CFC1 calc(100% - 16px),
    transparent 100%
  );
  z-index: 0;
}
.pipeline__stage {
  position: relative;
  z-index: 1;
  background: #FBF7EE;
  border: 1.5px solid #888;
  border-radius: 6px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 200px;
  max-width: 280px;
  opacity: 0;
  transform: translateX(-44px);
  transition:
    opacity 640ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 640ms cubic-bezier(0.23, 1, 0.32, 1);
}
.pipeline__stage:nth-child(even) { transform: translateX(44px); }
.pipeline__stage.is-in { opacity: 1; transform: translateX(0); }
.pipeline__stage--accent {
  background: var(--ink);
  border-color: var(--ink);
}
.pipeline__stage--accent .pipeline__stage-name { color: #F5F5F5; }
.pipeline__stage--accent .pipeline__stage-sub { color: #888; }
.pipeline__stage-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.pipeline__stage-sub {
  font-size: 10.5px;
  color: #5F5F5F;
}
.pipeline__sources-label {
  text-align: center;
  font-size: 9px;
  color: #5F5F5F;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.pipeline__sources {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
  padding: 0;
}
.pipeline__source {
  background: #FFF;
  border: 1px solid #D4CFC1;
  border-radius: 6px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 220px;
  max-width: 320px;
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity 640ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 640ms cubic-bezier(0.23, 1, 0.32, 1);
}
.pipeline__source:nth-child(even) { transform: translateX(32px); }
.pipeline__source.is-in { opacity: 1; transform: translateX(0); }
.pipeline__source-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.pipeline__source-sub {
  font-size: 10.5px;
  color: #5F5F5F;
  max-width: 36ch;
  line-height: 1.45;
}
.pipeline__caption {
  text-align: center;
  font-size: 11px;
  color: #5F5F5F;
  margin: 0 auto;
  max-width: 60ch;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .pipeline__stage,
  .pipeline__source { opacity: 1; transform: none; transition: none; }
}

/* ----------------------------------------------------------------
   pre-footer CTA strip, used on home + AI pages
---------------------------------------------------------------- */
.cta-strip {
  padding-top: clamp(60px, 10vw, 120px);
  padding-bottom: clamp(40px, 6vw, 80px);
  text-align: left;
  position: relative;
  z-index: 1;
}
.cta-strip__h {
  font-family: var(--font);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 clamp(16px, 2vw, 24px);
  max-width: 18ch;
}
.cta-strip__p {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
  margin: 0 0 clamp(24px, 3vw, 36px);
}
/* Same solid pill button as .hero__cta */
.cta-strip__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  width: fit-content;
}
.cta-strip__btn: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(--bg);
}
.cta-strip__btn:active { transform: translateY(0); }
.cta-strip__btn span[aria-hidden] {
  display: inline-block;
  transition: transform 0.2s ease;
}
.cta-strip__btn:hover span[aria-hidden] { transform: translateX(3px); }

/* ----------------------------------------------------------------
   cases easter egg, 3 heart clicks reveals a "Case studies →" link
   next to the heart, links to the hidden work overview page
---------------------------------------------------------------- */
.cases-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: rgba(216, 68, 58, 0.10);
  border: 0.5px solid rgba(216, 68, 58, 0.3);
  border-radius: 999px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transition: opacity 320ms ease-out, transform 320ms cubic-bezier(.22,.7,.2,1), background 200ms ease;
  vertical-align: 1px;
}
.cases-link.is-revealed { opacity: 1; transform: translateY(0) scale(1); }
.cases-link:hover { background: rgba(216, 68, 58, 0.18); }
.cases-link svg { transition: transform 200ms ease; }
.cases-link:hover svg { transform: translateX(2px); }

/* keep legacy cases-egg modal styles for now (unused with link approach) */
.cases-egg {
  position: fixed; inset: 0;
  z-index: 1000;
  display: none;
  pointer-events: none;
}
.cases-egg.is-open { display: block; pointer-events: auto; }
.cases-egg__backdrop {
  position: absolute; inset: 0;
  background: rgba(22, 22, 19, 0.32);
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  animation: egg-fade .25s ease-out;
}
.cases-egg__panel {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: 760px;
  width: calc(100% - 32px);
  max-height: calc(100vh - 64px);
  overflow: auto;
  background: var(--paper, #F5EFE2);
  border: 0.5px solid var(--rule);
  border-radius: 6px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 20px 60px rgba(22,22,19,0.18), 0 4px 14px rgba(22,22,19,0.08);
  animation: egg-pop .35s cubic-bezier(.2,.7,.2,1);
}
.cases-egg__close {
  position: absolute;
  top: 12px; right: 14px;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  color: var(--muted);
  padding: 4px 10px;
  font-weight: 300;
}
.cases-egg__close:hover { color: var(--ink); }
.cases-egg__eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 8px;
}
.cases-egg__h {
  font-family: var(--font);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 clamp(20px, 3vw, 32px);
  max-width: 24ch;
}
.cases-egg__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 28px);
}
.cases-egg__item {
  padding-top: clamp(16px, 2vw, 20px);
  border-top: 0.5px solid var(--rule);
}
.cases-egg__item:first-child { border-top: none; padding-top: 0; }
.cases-egg__name {
  font-family: var(--font-serif, 'EB Garamond'), Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 24px);
  color: var(--ink);
  margin: 0 0 4px;
}
.cases-egg__meta {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.cases-egg__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 56ch;
}
@keyframes egg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes egg-pop {
  from { opacity: 0; transform: translate(-50%, -45%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ----------------------------------------------------------------
   foot, 3-column row ported from live cherifsansserif.com
---------------------------------------------------------------- */
.foot {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(2rem, 4vw, 3rem) 0;
  margin-top: clamp(4rem, 8vw, 6rem);
  background: var(--bg);
}
.foot__dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  -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 > .shell { position: relative; z-index: 1; }
.foot__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  font-size: 13px;
  color: var(--muted);
}
.foot__copyright {
  text-align: left;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.foot__center {
  text-align: center;
  color: var(--ink);
}
.foot__heart-btn {
  display: inline-block;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  vertical-align: baseline;
  line-height: 0;
}
.foot__heart {
  display: inline-block;
  width: 14px !important;
  height: 12px !important;
  max-width: 14px;
  color: var(--ink);
  vertical-align: -2px;
  transition: color 0.25s ease, transform 0.25s ease;
  margin: 0 4px;
  flex-shrink: 0;
  transition: color 200ms var(--ease), transform 80ms var(--ease-out);
}
.foot__heart-btn:hover .foot__heart,
.foot__center:hover .foot__heart { color: #E11D48; transform: scale(1.15); }
.foot__heart-btn:active .foot__heart { transform: scale(0.92); transition-duration: 0.12s; }
.foot__heart-btn:active .foot__heart { transform: scale(0.85); }

/* 80s-game-style +1 pop */
.heart-plus {
  position: absolute;
  pointer-events: none;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 14px;
  color: #C13B45;
  opacity: 0;
  transform: translate(-50%, 0);
  animation: heartPlus 900ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  white-space: nowrap;
  z-index: 100;
  text-shadow: 1px 1px 0 var(--bg);
}
@keyframes heartPlus {
  0%   { opacity: 0; transform: translate(-50%, 4px) scale(0.6); }
  15%  { opacity: 1; transform: translate(-50%, -8px) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, -48px) scale(1.0); }
}
.foot__controls {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  align-items: center;
}
.foot__location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.foot__status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1F8A4C;
  flex-shrink: 0;
}
.foot__link {
  font-size: 12px;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}
.foot__link:hover { color: var(--ink); }

@media (max-width: 700px) {
  .foot__row {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.75rem;
  }
  .foot__copyright, .foot__center { text-align: center; }
  .foot__controls { justify-content: center; }
}

/* ----------------------------------------------------------------
   process page, vertical flow with doodle connectors
---------------------------------------------------------------- */
.process-hero {
  padding-top: clamp(96px, 18vw, 200px);
  padding-bottom: clamp(48px, 8vw, 80px);
}
.process-hero h1 {
  font-size: clamp(40px, 7vw, 96px);
  font-weight: 480;
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--ink);
  max-width: 16ch;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.process-hero h1 em {
  font-style: normal;
  color: var(--muted);
}
.process-hero__lede {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink);
  max-width: 56ch;
  line-height: 1.5;
}

.process {
  padding-bottom: clamp(96px, 12vw, 160px);
}

.process__flow {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(28px, 4vw, 48px) 0;
  align-items: start;
}

.step__icon {
  width: 64px;
  height: 64px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg) 50%, white);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.step__icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step__num {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.step__body { padding-top: 8px; }
.step__title {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}
.step__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
}
.step__reality {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-radius: 6px;
  font-style: italic;
  max-width: 52ch;
}
.step__reality::before {
  content: "Reality: ";
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 10px;
  margin-right: 4px;
}

/* doodle connector, sits between steps, drawn with SVG */
.connector {
  position: relative;
  height: 80px;
  margin-left: 32px;
  width: 96px;
  z-index: 1;
}
.connector svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  stroke: var(--ink);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.55;
}
.connector--loop svg {
  stroke-dasharray: 4 5;
  opacity: 0.45;
}
.connector--loop {
  height: 120px;
}

/* delivery (final) row */
.step--final .step__icon {
  background: var(--ink);
  border-color: var(--ink);
}
.step--final .step__icon svg {
  stroke: var(--bg);
}
.step--final .step__title { color: var(--ink); }

@media (max-width: 720px) {
  .step { grid-template-columns: 64px 1fr; gap: 16px; }
  .step__icon { width: 52px; height: 52px; border-radius: 12px; }
  .step__icon svg { width: 22px; height: 22px; }
  .connector { margin-left: 26px; width: 64px; height: 60px; }
  .connector--loop { height: 90px; }
}

/* ============================================================
   APPROACH PAGE, scrum doodle journey
   Adapted from Anthropic design handoff (Caveat + Hanken)
   Off-white paper, fine ink linework, single red accent.
   Scoped under .approach-page to avoid bleed onto other pages.
   ============================================================ */
/* approach-page scope: Caveat for the doodle journey only.
   Red lives ONLY on the journey thread/scenes (--journey-red, hardcoded).
   The global --accent stays silver so headline em stays silver everywhere. */
.approach-page {
  --paper: #F5EFE2;
  --paper-2: #FBF7EE;
  --journey-red: #D8443A;
  --journey-red-soft: rgba(216,68,58,.10);
  --hair: rgba(35,33,28,.14);
  --head: 'Caveat', cursive;
  --body-alt: 'Hanken Grotesk', system-ui, sans-serif;
  --maxw: 1080px;
  position: relative;
}

/* Hero overflow opens up so the red thread can descend into the journey below */
/* Approach pages: tighten hero bottom + pull journey up so the thread feels
   continuous from cue → spine, not two separate sections. */
.approach-page .hero {
  overflow: visible;
  position: relative;
  padding-bottom: clamp(40px, 6vw, 80px);
}
.approach-page .journey { margin-top: clamp(-32px, -4vw, -16px); }
.approach-page .stage:first-of-type { padding-top: clamp(40px, 5vw, 64px); }

/* Footer: drop isolation so the spine can pass through and terminate at the heart.
   The footer's text and heart still paint above the spine via .shell z-index. */
.approach-page .foot { overflow: visible; isolation: auto; }
.approach-page .foot > .shell { position: relative; z-index: 2; }
.approach-page .foot__heart-btn { position: relative; z-index: 3; }

/* Cue lives inside hero, left-aligned under the hero copy */
.thread-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(32px, 4vw, 48px);
  color: var(--muted);
  font-family: 'Caveat', cursive;
  font-size: 22px;
  position: relative;
  z-index: 3;
}
.thread-cue svg {
  width: 14px;
  height: 22px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .55;
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(4px) } }

/* Descending red thread: starts under the cue (left side), curves to page center
   where it meets the journey spine. */
.hero-thread {
  position: absolute;
  left: var(--pad);
  bottom: clamp(-260px, -26vw, -160px);
  width: calc(50% - var(--pad));
  height: clamp(260px, 30vw, 360px);
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

/* When the cue replaces the arrow with the thread itself (process page),
   anchor the thread to the cue's right edge so it visibly originates from
   the text "follow the thread", then curves down to page center. */
.thread-cue--thread { position: relative; }
.thread-cue--thread .hero-thread {
  position: absolute;
  left: 100%;
  bottom: auto;
  top: 50%;
  transform: none;
  margin-left: 6px;
  width: clamp(320px, 42vw, 580px);
  height: clamp(280px, 32vw, 380px);
}
.hero-thread path {
  fill: none;
  stroke: var(--journey-red);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#ink2);
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
  animation: hero-thread-draw 1.8s cubic-bezier(.22,.7,.2,1) .35s forwards;
  vector-effect: non-scaling-stroke;
}
@keyframes hero-thread-draw { to { stroke-dashoffset: 0; } }
.thread-cue svg {
  width: 24px;
  height: 36px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .55;
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(7px) } }

/* ---- JOURNEY ---- */
.journey {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto; padding: 0 32px;
}
/* ONE continuous spine, body-level absolute SVG positioned by journey.js to span
   from the cue text (in the hero) all the way down to the footer heart. */
#spine { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 1; overflow: visible; }
#spine .route { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: .16; stroke-dasharray: 1 7; stroke-linecap: round; }
#spine .thread { fill: none; stroke: var(--journey-red); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

.stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 9vh 0;
}
/* When a hotspot is open inside a stage, lift the whole stage above the outro
   so the popover doesn't get clipped behind it. */
.stage:has(.hotspot.open) { z-index: 50; }
/* per-child initial state, JS scroll-progress drives opacity/transform */
.stage .stage-num,
.stage .stage-text p,
.stage .scene-wrap {
  opacity: 0;
  will-change: opacity, transform;
}
.stage .stage-num { transform: translateY(12px); }
.stage .stage-text p { transform: translateY(18px); }
.stage .scene-wrap { transform: translateY(28px); }

/* h2 itself stays visible, each word inside is animated individually */
.stage .stage-text h2 .rword {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1;
  padding: 0 0 2px;
}
.stage .stage-text h2 .rword > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}
.stage:nth-of-type(even) .stage-text { order: 2; }
.stage:nth-of-type(even) .scene-wrap { order: 1; }
.stage-text { max-width: 420px; }
.stage:nth-of-type(even) .stage-text { margin-left: auto; }
.stage-num {
  font-weight: 600;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--journey-red);
  display: block;
  margin-bottom: 12px;
}
.stage-text h2 {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--ink);
}
.stage-text p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; text-wrap: pretty; font-family: var(--font); }

.scene-wrap { position: relative; width: 100%; }
.scene { width: 100%; height: auto; overflow: visible; }
.scene .dk, .diverge .dk { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.scene .thin, .diverge .thin { fill: none; stroke-width: 1.7; }
.scene .ac, .diverge .ac { fill: none; stroke: var(--journey-red); }
.scene .fill-ac, .diverge .fill-ac { fill: var(--journey-red-soft); }
.scene .dsym, .diverge .dsym { font-family: var(--head); font-size: 30px; font-weight: 600; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.scene .dlabel, .diverge .dlabel { font-family: var(--head); font-size: 21px; font-weight: 600; fill: var(--muted); text-anchor: middle; }
.scene .dlabel.ac, .diverge .dlabel.ac { fill: var(--journey-red); stroke: none; }

/* ---- diverge (full-width branching stage 03) ---- */
.stage.wide {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 72px;
  padding: 11vh 0 9vh;
}
.stage.wide .stage-text { max-width: 600px; margin: 0 auto; }
.stage.wide .stage-num { justify-content: center; }
.diverge-wrap {
  position: relative;
  width: 100%;
  max-width: 940px;
  margin: 18px auto 0;
}
.diverge { width: 100%; height: auto; overflow: visible; display: block; }
.dv-branch {
  fill: none;
  stroke: var(--journey-red);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dv-station, .dv-gate { opacity: 0; transition: opacity .6s ease; }
.branch-label {
  position: absolute; left: var(--x); top: var(--y);
  width: 190px;
  transform: translate(-50%, 10px);
  text-align: center;
  opacity: 0;
  transition: opacity .55s ease, transform .55s ease;
}
.branch-label.on { opacity: 1; transform: translate(-50%, 0); }
.branch-label strong {
  display: block;
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.branch-label p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
  font-family: var(--font);
}
.diverge-merge {
  position: absolute;
  left: 50%; bottom: -6px;
  transform: translateX(-50%);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--journey-red);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .55s ease;
}
.diverge-merge.on { opacity: 1; }
.scene path, .scene circle, .scene rect, .scene ellipse, .scene line {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
}
.stage.in .scene path, .stage.in .scene circle, .stage.in .scene rect,
.stage.in .scene ellipse, .stage.in .scene line {
  animation: draw 1.1s ease forwards;
}
.scene text { opacity: 0; }
.stage.in .scene text { animation: fadein .5s ease .7s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }

/* hotspots */
.hotspot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 5; }
.hotspot .dot {
  appearance: none; border: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--journey-red); color: #fff;
  font-family: var(--body); font-weight: 700; font-size: 18px; line-height: 1;
  display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(216,68,58,.35);
  transition: transform .25s ease;
  position: relative;
}
.hotspot .dot::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid var(--journey-red); opacity: .45;
  animation: ping 2.4s ease-out infinite;
}
.hotspot .dot span { display: block; transition: transform .25s ease; }
.hotspot.open .dot { transform: rotate(45deg) scale(1.05); }
.hotspot.open .dot::after { display: none; }
@keyframes ping { 0% { transform: scale(.7); opacity: .5 } 70%, 100% { transform: scale(1.5); opacity: 0 } }

.hotspot .pop {
  position: absolute;
  left: 50%; bottom: calc(100% + 14px);
  transform: translateX(-50%) translateY(8px);
  width: 230px;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  padding: 14px 16px;
  box-shadow: 5px 6px 0 rgba(35,33,28,.12);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.hotspot.open .pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.hotspot.left .pop { left: auto; right: -6px; transform: translateX(0) translateY(8px); }
.hotspot.left.open .pop { transform: translateX(0) translateY(0); }
.hotspot.below .pop { bottom: auto; top: calc(100% + 14px); }
.hotspot .pop strong {
  display: block; font-family: var(--font); font-weight: 600; font-size: 14.5px;
  color: var(--journey-red); line-height: 1.15; margin-bottom: 5px; letter-spacing: -0.01em;
}
.hotspot .pop em { font-style: normal; color: var(--ink); font-weight: 600; }
.hotspot .pop p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }

/* OUTRO, eyebrow + editorial title + lede, mirroring the work-page section pattern.
   Pulled up via negative margin so the spine's last red segment lands in the outro. */
.approach-outro {
  position: relative; z-index: 1;
  text-align: left;
  margin-top: clamp(-140px, -14vw, -80px);
}
/* Match live cherifsansserif.com .work-tease__title sizing exactly */
.approach-outro .editorial__title {
  font-family: var(--font);
  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;
  max-width: 28ch;
}
/* Match live .work-tease__eyebrow, uppercase, tight 11px label */
.approach-outro .eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 1rem;
  gap: 0;
}
.approach-outro .eyebrow::before { display: none; }
.approach-outro__lede {
  max-width: 58ch;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--muted);
}
/* Approach-page only: open the footer so the heart-thread can rise out of it
   into the outro region. Heart pixel art stays on top via z-index on the shell. */
.approach-page .foot { overflow: visible; }

/* continuous heart-thread, lives INSIDE .foot, rises upward to bridge
   the spine endpoint → through outro → terminates at the heart.
   Positioned and sized by JS (placeHeartThread in journey.js). */
.heart-thread {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.heart-thread__line {
  fill: none;
  stroke: var(--journey-red);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#ink2);
  stroke-dasharray: var(--len, 1);
  stroke-dashoffset: var(--len, 1);
}
/* outro text breathes around the thread via paper-pill cutouts where they cross */
.approach-outro h2,
.approach-outro p { position: relative; z-index: 1; }
.approach-outro h2 em { background: var(--paper); padding: 0 2px; border-radius: 2px; }
.approach-outro h2 {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.approach-outro h2 em { font-style: italic; font-weight: 700; color: var(--accent); }
.approach-outro h2 .red { color: var(--journey-red); }
.approach-outro h2 .muted { color: var(--muted); }
.approach-outro p {
  max-width: 56ch;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .stage { grid-template-columns: 1fr; gap: 18px; padding: 6vh 0; }
  .stage .stage-text, .stage:nth-of-type(even) .stage-text { order: 1; margin: 0 auto; text-align: center; max-width: none; }
  .stage .scene-wrap, .stage:nth-of-type(even) .scene-wrap { order: 2; }
  .stage-num { justify-content: center; }
  /* keep the spine on mobile, runs along the right edge */
  .hotspot .pop { width: 190px; }
  .branch-label { width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .approach-page * { animation: none !important; scroll-behavior: auto; }
  .stage { opacity: 1; transform: none; }
  .scene path, .scene circle, .scene rect, .scene ellipse, .scene line { stroke-dashoffset: 0 !important; }
  .scene text { opacity: 1 !important; }
  .dv-branch { stroke-dashoffset: 0 !important; }
  .dv-station, .dv-gate, .branch-label, .diverge-merge { opacity: 1 !important; transform: translate(-50%, 0) !important; }
}

/* ============================================================
   JOURNEY page, lanes / orchestrate stage (CX/customer-journey)
   ============================================================ */
.lane-head {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translateX(-50%);
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.lane-head::after {
  content: "";
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--journey-red);
  margin: 4px auto 0;
}
.sync-tag {
  position: absolute;
  left: var(--x, auto);
  right: var(--right, auto);
  top: var(--y);
  transform: translateY(-50%);
  font-family: var(--font);
  font-weight: 500;
  font-size: 12px;
  color: var(--journey-red);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
/* Aspect-lock the cx_lanes container so sync-tag %s stay stable across viewports.
   SVG viewBox is 1000×560 (cx-doodles.js S.cx_lanes). */
.stage.wide .diverge-wrap { aspect-ratio: 1000 / 560; }
.lanes-cap {
  display: block;
  margin: 18px auto 0;
  max-width: 640px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}
.lanes-cap em { font-style: italic; color: var(--ink); font-weight: 500; }
@media (max-width: 760px) {
  .lane-head { font-size: 13px; }
  .sync-tag { font-size: 11px; }
  .lanes-cap { font-size: 13px; margin-top: 14px; max-width: 90%; }
}