/* AI product manager. After MotionSites "Intelligence Layer": black void stage, restrained
   silver type in Manrope, white pill CTAs, full-bleed video behind the left column.
   The video scrolls through the real Support Desk demo after it processes the inbox,
   flattened to a dim grey plate. */
:root[data-role] {
  --paper: #050505; --panel: #0d0d0d; --ink: #fafafa; --muted: #a7a6a6; --line: #232323;
  --signal: #ffffff; --signal-soft: #161616; --pass: #8fe3bf;
  color-scheme: dark;
}
body { font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .section-head h2, .work-item h3, .about .bio h2, .contact h2 { font-weight: 400; letter-spacing: 0; }
.job .when b, .shelf a.title { font-weight: 600; }
.work-item .shows { border-left-color: #6d6d6d; }
.tags li { background: #161616; color: #cfcfcf; border-radius: 999px; }
.receipt { background: #0b0b0b; }

/* ---------- Hero ---------- */
.vl-stage { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #050505; overflow: hidden; }
.vl-stage a { color: #fff; text-decoration: none; }
.vl-plate { position: absolute; inset: 0; z-index: 0; }
.vl-plate video { position: absolute; right: 0; top: 0; width: 64%; height: 100%; max-width: none; object-fit: cover; object-position: 30% center;
  filter: grayscale(1) contrast(.6) brightness(.32); opacity: .8; }
.vl-plate::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, #050505 34%, rgba(5,5,5,.6) 52%, rgba(5,5,5,0) 72%),
              linear-gradient(to bottom, rgba(5,5,5,0) 70%, rgba(5,5,5,.85) 86%, #050505 100%); }

.vl-top { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 28px clamp(20px, 5vw, 75px) 0; }
.vl-brand { display: inline-flex; align-items: center; gap: 14px; font-weight: 500; font-size: 1rem; color: #fafafa; }
.vl-brand svg { width: 22px; height: auto; }
.vl-links { display: flex; gap: 26px; font-size: 1rem; }
.vl-links a { color: #b6b5b5; transition: color .2s; }
.vl-links a:hover { color: #fff; }
.vl-pill { display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #050505 !important; border-radius: 999px; padding: 13px 28px; font-size: 1rem; font-weight: 500; transition: background .2s; }
.vl-pill:hover { background: #dcdcdc; }
.vl-pill-nav { justify-self: end; }

.vl-hero { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(20px, 5vw, 75px); }
.vl-headline { font-size: clamp(2.3rem, 5vw, 4.5rem); font-weight: 400; line-height: 1.12; letter-spacing: 0.004em; color: #fafafa; }
.vl-headline span, .vl-sub span { display: block; }
.vl-sub { margin: clamp(20px, 2.6vw, 30px) 0 0; font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.4; color: #a7a6a6; word-spacing: 0.08em; }
.vl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; margin-top: clamp(28px, 3.4vw, 44px); }
.vl-ghost { font-weight: 500; font-size: 1rem; }
.vl-ghost:hover { color: #b6b5b5; }

.vl-logos { position: relative; z-index: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 16px clamp(32px, 7vw, 96px); margin: 0; padding: 0 20px 36px; list-style: none; color: #8b8a8a; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; }

.vl-proof { padding-top: 8px; padding-bottom: clamp(40px, 6vw, 72px); }
.vl-proof .evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); border: 0; }
.vl-proof .evidence li { grid-template-columns: 1fr; gap: 6px; border-top: 1px solid var(--line); border-bottom: 0; }
.vl-proof .evidence b { color: #fff; font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.6rem); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes vl-rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes vl-fade { from { opacity: 0; } }
  .vl-top { animation: vl-rise .8s cubic-bezier(.22,1,.36,1) both; }
  .vl-headline { animation: vl-rise .9s .06s cubic-bezier(.22,1,.36,1) both; }
  .vl-sub { animation: vl-rise .9s .14s cubic-bezier(.22,1,.36,1) both; }
  .vl-actions { animation: vl-rise .9s .22s cubic-bezier(.22,1,.36,1) both; }
  .vl-logos { animation: vl-fade 1.1s .34s ease both; }
}
@media (max-width: 860px) {
  .vl-top { grid-template-columns: 1fr auto; }
  .vl-links { display: none; }
  .vl-plate video { width: 100%; object-position: 20% center; opacity: .45; }
  .vl-plate::after { background: linear-gradient(to bottom, rgba(5,5,5,.75), rgba(5,5,5,.35) 30%, rgba(5,5,5,.5) 60%, #050505); }
  .vl-headline span, .vl-sub span { display: inline; }
  .vl-logos { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; }
  .vl-proof .evidence { grid-template-columns: minmax(0, 1fr); }
}