/* Velar Bureau: About tiles, after Igor's refs (dot-matrix poster, particle building, glass folder, pixel type) */
.vt .tile { padding: 0; }
.vt canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vt__top { position: absolute; left: 18px; right: 18px; top: 16px; z-index: 2; display: flex; justify-content: space-between; font-size: .74rem; letter-spacing: .02em; color: rgba(255, 255, 255, .9); }
.vt__top b { font-weight: 600; }
.vt__top--ink { color: var(--graphite); opacity: .75; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 1 · dot-matrix facade on a signal gradient */
.vt-dots { background: linear-gradient(180deg, #F6B1AC 0%, #F27F6E 38%, #EC5537 70%, #FF3A1C 100%); }
.vt-dots__tag { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; margin: 0; padding: 8px 16px; white-space: nowrap;
  font-family: var(--fd); font-weight: 500; font-size: clamp(1.05rem, min(1.5vw, 21.6px), 1.4rem); letter-spacing: -.02em; color: #fff; }
.vt-br { position: absolute; width: 10px; height: 10px; border: 0 solid #fff; }
.vt-br--tl { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.vt-br--br { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }

/* 2 · frosted glass folder with leads sliding in */
.vt-folder { background-color: #ECEDEF; background-image: radial-gradient(circle, rgba(14, 15, 17, .12) 1px, transparent 1.4px); background-size: 18px 18px; }
.vf__back { position: absolute; left: 9%; right: 9%; top: 18%; bottom: 14%; border-radius: 22px; overflow: hidden; background: #1A1C20; box-shadow: 0 30px 50px -20px rgba(14, 15, 17, .45); }
.vf__back::before { content: ""; position: absolute; left: 0; top: 0; width: 42%; height: 12%; background: #ECEDEF; border-bottom-right-radius: 18px; z-index: 1; }
.vf__back i { position: absolute; width: 70%; height: 70%; border-radius: 50%; filter: blur(28px); animation: vfBlob 9s ease-in-out infinite alternate; }
.vf__back i:nth-child(1) { background: #E2492B; left: -10%; top: 20%; }
.vf__back i:nth-child(2) { background: #3B5874; right: -15%; top: -10%; animation-duration: 11s; animation-delay: -3s; }
.vf__back i:nth-child(3) { background: #0E0F11; left: 30%; bottom: -30%; animation-duration: 7s; animation-delay: -5s; }
.vf__back i:nth-child(4) { background: #F6B1AC; left: 40%; top: 10%; width: 30%; height: 30%; animation-duration: 13s; }
@keyframes vfBlob { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18%, -12%) scale(1.25); } 100% { transform: translate(-14%, 10%) scale(.9); } }
.vf__sheets { position: absolute; left: 16%; right: 16%; top: 22%; bottom: 30%; z-index: 1; }
.vf__sheet { position: absolute; left: 0; right: 0; top: 0; height: 100%; padding: 14px 14px; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(14, 15, 17, .18);
  font-size: .72rem; line-height: 1.45; color: var(--slate); transform: translateY(60%); opacity: 0; transition: transform 1.1s var(--ease), opacity .6s var(--ease); }
.vf__sheet b { display: block; color: var(--graphite); font-size: .82rem; font-weight: 600; margin-bottom: 4px; }
.vf__sheet em { font-style: normal; color: var(--signal); }
.vf__sheet.is-up { transform: translateY(-18%); opacity: 1; }
.vf__sheet.is-in { transform: translateY(70%); opacity: 1; }
.vf__front { position: absolute; left: 6%; right: 6%; top: 44%; bottom: 10%; z-index: 2; border-radius: 20px; padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .22)); border: 1px solid rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 20px 40px -18px rgba(14, 15, 17, .35), inset 0 1px 0 rgba(255, 255, 255, .8);
  display: flex; flex-direction: column; }
.vf__front::before { content: ""; position: absolute; right: -1px; top: -16px; width: 52%; height: 22px; border-radius: 14px 14px 0 0;
  background: rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .75); border-bottom: 0; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.vf__name { font-size: 1.05rem; font-weight: 500; color: var(--graphite); }
.vf__date { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: .74rem; color: var(--slate); margin-top: 2px; }
.vf__cap { margin: auto 52px 0 0; font-size: .74rem; line-height: 1.4; color: rgba(14, 15, 17, .7); }
.vf__plus { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(180deg, #2A2C31, #0E0F11); color: #fff; font-size: 1.4rem; font-weight: 300; box-shadow: 0 6px 14px rgba(14, 15, 17, .35), inset 0 1px 0 rgba(255, 255, 255, .15); }

/* 3 · pixel-type stat */
.vt-pix { background: var(--graphite-2, #17191C); }

/* 4 · particle building on light */
.vt-rise { background: radial-gradient(ellipse at 50% 85%, rgba(255, 120, 70, .22), rgba(255, 120, 70, 0) 55%), #EEF0F3; }
.vt-rise__tag { position: absolute; left: 18px; bottom: 16px; z-index: 2; margin: 0; font-family: var(--fd); font-weight: 500; font-size: clamp(1.05rem, min(1.5vw, 21.6px), 1.4rem); letter-spacing: -.02em; color: var(--graphite); }

@media (max-width: 1000px) { .vt .tile { min-height: 320px; } }

/* 3 · quote requests (manufacturers) */
.vt-rfq { display: flex; flex-direction: column; padding: 18px !important; color: var(--steel); background: var(--graphite-2, #17191C) !important; }
.rfq__top { display: flex; justify-content: space-between; font-size: .74rem; color: var(--mist); }
.rfq__live { display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .08em; color: var(--signal); }
.rfq__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: callPulse 1.8s infinite; }
.rfq__n { margin-top: 14px; font-family: var(--fd); font-stretch: 125%; font-weight: 600; font-size: clamp(3rem, min(5vw, 72px), 5rem); line-height: .9; letter-spacing: -.04em; }
.rfq__sub { margin-top: 6px; font-size: .8rem; color: var(--mist); }
.rfq__list { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rfq__list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; font-size: .74rem; background: rgba(227, 231, 237, .05); border-left: 2px solid transparent;
  opacity: 0; transform: translateY(-8px); transition: opacity .5s var(--ease), transform .5s var(--ease), background .5s; }
.rfq__list li.is-in { opacity: 1; transform: none; }
.rfq__list li:first-child { background: rgba(226, 73, 43, .14); border-left-color: var(--signal); }
.rfq__list em { font-style: normal; font-weight: 600; color: var(--steel); }
.rfq__list span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(227, 231, 237, .85); }
.rfq__list small { font-size: .68rem; color: var(--mist); }
.rfq__foot { margin-top: 12px; font-size: .72rem; color: var(--mist); }

/* folder: lead sheets are clipped inside the folder (no paper poking out below) */
.vf__sheets { top: 8%; bottom: 14%; overflow: hidden; border-radius: 12px 12px 0 0; }
.vf__sheet { top: auto; bottom: 0; height: 72%; transform: translateY(105%); }
.vf__sheet.is-up { transform: translateY(-4%); }
.vf__sheet.is-in { transform: translateY(105%); }

/* 3 · leads chart */
.vt-chart { background: var(--graphite-2, #17191C) !important; color: var(--steel); }
.vt-chart canvas { z-index: 0; }
.vc__top { position: absolute; left: 18px; right: 18px; top: 16px; z-index: 1; display: flex; justify-content: space-between; font-size: .74rem; color: var(--mist); }
.vc__live { display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .08em; color: var(--signal); }
.vc__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: callPulse 1.8s infinite; }
.vc__n { position: absolute; left: 18px; top: 42px; z-index: 1; font-family: var(--fd); font-stretch: 125%; font-weight: 600; font-size: clamp(3rem, min(5vw, 72px), 5rem); line-height: .9; letter-spacing: -.04em; }
.vc__n em { font-style: normal; font-size: .3em; color: var(--mist); letter-spacing: 0; margin-left: 4px; }
.vc__d { position: absolute; left: 18px; top: calc(42px + clamp(3rem, min(5vw, 72px), 5rem)); z-index: 1; font-size: .82rem; color: var(--signal); }
.vc__foot { position: absolute; left: 18px; bottom: 14px; z-index: 1; font-size: .72rem; color: var(--mist); }
/* 4 · ascii tower on steel */
.vt-rise { background: var(--steel) !important; }
.vt-rise canvas.obj { z-index: 0; }
/* folder: no notch at the top-left of the back panel */
.vf__back::before { display: none; }
/* 4 · dot-matrix construction on graphite (matches tile 1 and 3) */
.vt-rise { background: radial-gradient(70% 60% at 50% 100%, rgba(226, 73, 43, .18), transparent 70%), #17191C !important; }
.vt-rise .vt__top--ink { color: rgba(255, 255, 255, .8); opacity: 1; }
.vt-rise__tag { color: #fff; }

/* 4 · construction diary inside a phone: content → views → leads */
.vt-rise.vr { display: grid; place-items: center; padding: 18px 18px 54px !important; }
.vr__phone { position: relative; width: min(78%, 250px); height: 100%; max-height: 380px; border-radius: 28px; padding: 10px; background: #0B0C0E;
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6), inset 0 0 0 4px #1C1E22; overflow: hidden; display: flex; flex-direction: column; }
.vr__bars { position: absolute; left: 18px; right: 18px; top: 18px; z-index: 3; display: flex; gap: 4px; }
.vr__bars i { flex: 1; height: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; position: relative; }
.vr__bars i:nth-child(-n+2) { background: #fff; }
.vr__bars i:nth-child(3)::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: vrBar 4s linear infinite; }
@keyframes vrBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vr__acc { position: absolute; left: 18px; top: 28px; z-index: 3; display: flex; flex-direction: column; font-size: .7rem; line-height: 1.2; color: #fff; }
.vr__acc b { font-weight: 600; } .vr__acc span { opacity: .65; }
.vr__screen { position: relative; flex: 1; border-radius: 20px; overflow: hidden; background: radial-gradient(70% 60% at 50% 100%, rgba(226, 73, 43, .22), transparent 70%), #17191C; }
.vr__screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.vr__cap { position: absolute; left: 18px; right: 18px; bottom: 86px; z-index: 3; display: flex; justify-content: space-between; align-items: baseline; font-size: .72rem; color: #fff; }
.vr__cap b { font-weight: 600; } .vr__cap span { opacity: .7; } .vr__cap i { font-style: normal; font-weight: 600; opacity: 1; }
.vr__feed { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.vr__feed li { padding: 5px 9px; border-radius: 12px; font-size: .66rem; line-height: 1.3; color: #fff; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr__feed li.is-in { opacity: 1; transform: none; }
.vr__feed li b { font-weight: 600; }
.vr__feed li.is-lead { background: var(--signal); color: #0E0F11; font-weight: 600; }
.vr__feed li.is-lead em { font-style: normal; margin-right: 6px; }
.vt-rise.vr .vt-rise__tag { left: 18px; bottom: 16px; }
.vr__screen { margin-top: 44px; margin-bottom: 98px; }
.vr__cap { bottom: 108px; }
.vr__acc { top: 26px; }
/* phone screen: photo stories instead of a drawing */
.vr__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity .8s var(--ease); }
.vr__screen img.is-on { opacity: 1; animation: vrZoom 4.2s linear forwards; }
@keyframes vrZoom { from { transform: scale(1.02); } to { transform: scale(1.14); } }
.vr__screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, transparent 60%, rgba(0,0,0,.55)); }
.vr__bars i:nth-child(-n+2) { background: rgba(255, 255, 255, .25); }
.vr__bars i:nth-child(3)::after { animation: none; }
.vr__bars i.is-done { background: #fff; }
.vr__bars i.is-run::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: vrBar 4s linear forwards; }

/* about tiles: three tiles after removing the construction tile */
.mani__tiles.vt { grid-template-columns: 1.15fr 1fr .95fr 1.05fr; }
@media (max-width: 1000px) { .mani__tiles.vt { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .mani__tiles.vt { grid-template-columns: minmax(0, 1fr); } }

/* 4 · dot globe */
.vt-globe { background: radial-gradient(90% 80% at 60% 70%, #FFFFFF 0%, #EEF0F3 55%, #DDE2E8 100%) !important; color: var(--graphite); }
.vg__top { position: absolute; left: 18px; right: 18px; top: 16px; z-index: 1; display: flex; justify-content: space-between; font-size: .74rem; color: var(--slate); }
.vg__live { display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .08em; color: var(--signal); }
.vg__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: callPulse 1.8s infinite; }
.vg__n { position: absolute; left: 18px; top: 40px; z-index: 1; display: flex; align-items: baseline; gap: 8px; font-family: var(--fd); font-stretch: 125%; font-weight: 600; font-size: clamp(3rem, min(5vw, 72px), 5rem); line-height: .9; letter-spacing: -.04em; color: var(--graphite); }
.vg__n em { font-style: normal; font-size: .28em; letter-spacing: 0; color: var(--slate); font-weight: 500; }
.vg__last { position: absolute; left: 18px; bottom: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px; font-size: .74rem;
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(14, 15, 17, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 24px -14px rgba(14, 15, 17, .35); }
.vg__k { padding: 3px 8px; border-radius: 999px; background: var(--signal); color: #0E0F11; font-weight: 600; font-size: .68rem; }

/* globe: a statement instead of a second big number */
.vg__h { position: absolute; left: 18px; top: 40px; z-index: 1; max-width: 13ch; font-weight: 500; font-size: clamp(1.5rem, min(2.1vw, 30.24px), 2.2rem); line-height: 1.02; letter-spacing: -.035em; color: var(--graphite); }

/* globe: night card with a lit planet */
.vt-globe { background: radial-gradient(70% 60% at 85% 100%, rgba(226, 73, 43, .28), transparent 60%), radial-gradient(60% 55% at 0% 0%, rgba(70, 110, 180, .35), transparent 65%), linear-gradient(180deg, #0C111B 0%, #070A10 100%) !important; color: #E3E7ED; }
.vt-globe::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255, 255, 255, .5) .6px, transparent 1px); background-size: 46px 46px; opacity: .18; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.vt-globe .vg__top { color: #9CA2AD; }
.vt-globe .vg__h { color: #F2F4F7; }
.vt-globe .vg__last { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .14) !important; color: #E3E7ED !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* folder tile: flat green so it stands apart from the grey page and the red and dark tiles beside it */
.vt-folder { background: #1E9E62; }

/* folder: vertical gradient like the facade tile, in green */
.vt-folder { background: linear-gradient(180deg, #B7EBCF 0%, #6FD39F 38%, #2BB070 70%, #0F9455 100%) !important; }
/* globe: bigger planet, the pill sits over the bottom edge */
.vt-globe .vg__last { left: 50%; transform: translateX(-50%); white-space: nowrap; }
/* globe on phones: taller card so the planet and its arcs read bigger */
@media (max-width: 600px) { .vt .vt-globe { min-height: 440px; } }