/* Portfolio design system. Edit these tokens, then run node build-preview.cjs. */
:root {
  color-scheme:light;
  --font-body:'IBM Plex Mono',monospace;
  --zinc-50:#fafafa; --zinc-100:#f4f4f5; --zinc-200:#e4e4e7;
  --zinc-300:#d4d4d8; --zinc-400:#9f9fa9; --zinc-500:#71717b; --zinc-800:#27272a;
  --text-primary:var(--zinc-800); --text-secondary:var(--zinc-500);
  --surface:#fff; --surface-soft:var(--zinc-100); --line:var(--zinc-200);
  --brand-green:#6fb977; --brand-yellow:#c5b939;
  --selection:#e1f6d3; --selection-hover:#eff9e9; --focus:#427c48;
  --image-placeholder:var(--zinc-300); --cursor-color:var(--zinc-400);
  --type-small:.75rem; --type-caption:.875rem; --type-body:1rem;
  --type-subtitle:1.125rem; --type-title:1.5rem; --type-section:2rem;
  --leading-body:1.8; --leading-heading:1.3;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px; --space-24:96px;
  --page-max:1512px; --page-gutter:90px; --column-gap:86px;
  --radius:0; --grain-opacity:.125; --grain-size:240px;
  --motion-fast:150ms; --motion-base:300ms; --ease:cubic-bezier(.2,.7,.2,1);
  /* Aliases keep the existing page components on the same foundations. */
  --ink:var(--text-primary); --muted:var(--text-secondary);
  --ink-muted:var(--text-secondary); --ink-faint:var(--text-secondary);
  --paper:var(--surface); --border:var(--line); --sans:var(--font-body);
  --green:var(--brand-green); --yellow:var(--brand-yellow);
  --highlight:var(--selection); --placeholder:var(--image-placeholder);
  --accent:var(--brand-green); --accent-deep:var(--focus); --accent-light:var(--selection);
}
html,body{font-family:var(--font-body);color:var(--text-primary);background:var(--surface);font-synthesis:none}
body{font-weight:400;line-height:var(--leading-body)}
a,button{touch-action:manipulation}
a{color:inherit;text-underline-offset:5px}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:5px}
button{font-family:var(--font-body)}
[hidden]{display:none!important}
body::after{content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:var(--grain-opacity);background-image:url('/assets/paper-grain-v2.svg');background-repeat:repeat;background-size:var(--grain-size) var(--grain-size);mix-blend-mode:multiply}
.ring-cursor{display:none;position:fixed;z-index:99999;width:9px;height:9px;border:0;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;background:var(--cursor-color);transition:width var(--motion-fast),height var(--motion-fast)}
.ring-cursor.over-link{width:11px;height:11px}
@media(hover:hover) and (pointer:fine){.ring-cursor-active,.ring-cursor-active *{cursor:none!important}.ring-cursor-active .ring-cursor{display:block}}
/* The case studies retain their content, figures, and reading layouts. */
.top-nav{background:var(--surface);padding:var(--space-5) max(var(--space-5),calc((100vw - 1332px)/2));border-bottom:1px solid var(--line)}
.top-nav .nav-name{font-family:var(--font-body);font-size:var(--type-title);color:var(--text-primary)}
.top-nav .nav-name:hover{background:none;animation:none;-webkit-text-fill-color:var(--focus)}
.cs-shell{max-width:var(--page-max);padding:144px var(--page-gutter) var(--space-12);gap:var(--space-16)}
.cs-hero-title{font-family:var(--font-body);font-size:clamp(1.75rem,3vw,2.5rem);font-weight:500;line-height:var(--leading-heading);letter-spacing:-.03em}
.cs-hero-title em{color:var(--focus);font-style:normal}
.cs-headline{font:500 clamp(1.5rem,2.5vw,var(--type-section))/var(--leading-heading) var(--font-body)}
.cs-sub{font:500 var(--type-subtitle)/1.5 var(--font-body)}
.cs-body,.cs-hero-sub{font-size:var(--type-body);line-height:var(--leading-body);color:var(--text-secondary)}
.cs-eyebrow,.section-label,.cs-flow-name,.cs-meta-label,.ow-label{font-family:var(--font-body);font-size:var(--type-caption);font-weight:500;letter-spacing:0;color:var(--focus)}
.cs-caption,.cs-imglabel,.cs-carousel-count,.cs-carousel-note,.ow-cap{font-size:var(--type-caption);line-height:var(--leading-body);color:var(--text-secondary)}
.cs-section,.cs-section:first-of-type{margin-top:var(--space-24)}
.cs-img,.cs-hero-preview,.cs-carousel-frame,.cs-flow-step,.ow-frame{border-radius:var(--radius)}
.cs-carousel-nav button{font-family:var(--font-body);font-size:var(--type-caption);min-height:44px;padding:var(--space-2) var(--space-3);border:1px solid var(--line);background:var(--surface)}
.cs-carousel-nav button:hover:not(:disabled){background:var(--selection)}
.cs-back{font-size:var(--type-caption);color:var(--text-secondary)}
.scroll-progress{background:var(--brand-green);animation:none}
footer{font-family:var(--font-body);font-size:var(--type-caption);color:var(--text-secondary);border-color:var(--line)}
@media(max-width:1100px){:root{--page-gutter:6vw;--column-gap:44px}.cs-shell{gap:var(--space-10)}}
@media(max-width:700px){:root{--page-gutter:20px;--column-gap:32px}.cs-shell{display:block;padding:112px var(--page-gutter) var(--space-8)}.cs-section,.cs-section:first-of-type{margin-top:var(--space-16)}}
@media(prefers-color-scheme:dark){body{background:var(--surface)!important;color:var(--text-primary)!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition:none!important;scroll-behavior:auto!important}}

.cs-ovcard h3,.cs-stat-num,.cs-meta h4,.cs-meta-item h4{font-family:var(--font-body);font-size:var(--type-subtitle);font-weight:500}